How to Install Angular CLI on Ubuntu 20.04 LTS

In this article, We are going to cover How to Install Angular CLI on Ubuntu 20.04 LTS or any other cloud platform like Amazon EC2, Azure VM, Google Cloud Compute, etc. with preinstalled Ubuntu OS.

Introduction:

Angular is most popular open source Google-developed JavaScript framework. It is used to design client-side web and mobile application.

Why You Should Use Angular:

MVC Architecture: It is Open Source framework MVC based framework and advanced Typescript/JavaScript support.

Supports All Platforms: It has ability to build applications on any platforms like Web, Mobile and native mobile.

Beautiful UI and UX: Using Angular you can develop Featured Rich, Amazing UI and Single Page application.

Large Community: Angular became extremely among developers, largely available training materials, forums and third-party tools and can find solution of every issues.

Prerequisite:

  • Ubuntu 20.04 LTS 64 bit with Minimum Installation.
  • Minimum 2 CPU and 4 GB RAM.
  • Open Firewall Ports 3000 and 4200.

First, make sure that all your system packages are up-to-date, Run below commands to update/upgrade system packages.

sudo apt-get update
sudo apt-get upgrade

Install the curl

sudo apt-get install curl

Step #1: Installing Node.js and NPM

Before Installing Angular CLI on Ubuntu 18.04 LTS , First we need to Install latest NodeJS and Node Package Manager(NPM).

First, Add Node.js and NPM from NodeSource Repository

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -

To install Latest Node.js and npm on Ubuntu 20.04 LTS

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -

Output:

## Installing the NodeSource Node.js 12.x repo...

## Populating apt-get cache...

+ apt-get update
Ign:1 https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 InRelease
Hit:2 https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 Release
Hit:3 https://deb.nodesource.com/node_12.x bionic InRelease
Hit:5 http://ap-south-1.ec2.archive.ubuntu.com/ubuntu bionic InRelease
Get:6 http://ap-south-1.ec2.archive.ubuntu.com/ubuntu bionic-updates InRelease [88.7 kB]
Get:7 http://security.ubuntu.com/ubuntu bionic-security InRelease [88.7 kB]
Get:8 http://ap-south-1.ec2.archive.ubuntu.com/ubuntu bionic-backports InRelease [74.6 kB]
Fetched 252 kB in 1s (221 kB/s)
Reading package lists... Done

## Confirming "bionic" is supported...

+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_12.x/dists/bionic/Release'

## Adding the NodeSource signing key to your keyring...

+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK

## Creating apt sources list file for the NodeSource Node.js 12.x repo...

+ echo 'deb https://deb.nodesource.com/node_12.x bionic main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_12.x bionic main' >> /etc/apt/sources.list.d/nodesource.list

## Running `apt-get update` for you...

+ apt-get update
Ign:1 https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 InRelease
Hit:2 https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.6 Release
Hit:4 https://deb.nodesource.com/node_12.x bionic InRelease
Hit:5 http://ap-south-1.ec2.archive.ubuntu.com/ubuntu bionic InRelease
Hit:6 http://ap-south-1.ec2.archive.ubuntu.com/ubuntu bionic-updates InRelease
Hit:7 http://security.ubuntu.com/ubuntu bionic-security InRelease
Hit:8 http://ap-south-1.ec2.archive.ubuntu.com/ubuntu bionic-backports InRelease
Reading package lists... Done

## Run `sudo apt-get install -y nodejs` to install Node.js 12.x and npm
## You may also need development tools to build native addons:
sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
sudo apt-get update && sudo apt-get install yarn

Install Node JS and NPM using below command,

sudo apt-get install -y nodejs

Output:

The following NEW packages will be installed:
nodejs
0 upgraded, 1 newly installed, 0 to remove and 55 not upgraded.
Need to get 18.2 MB of archives.
After this operation, 92.3 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_12.x bionic/main amd64 nodejs amd64 12.18.3-1nodesource1 [18.2 MB]
Fetched 18.2 MB in 1s (31.2 MB/s)
Selecting previously unselected package nodejs.
(Reading database ... 230517 files and directories currently installed.)
Preparing to unpack .../nodejs_12.18.3-1nodesource1_amd64.deb ...
Unpacking nodejs (12.18.3-1nodesource1) ...
Setting up nodejs (12.18.3-1nodesource1) ...
Processing triggers for man-db (2.8.3-2ubuntu0.1) ...

Step #2: Check Node.js and NPM Version on Ubuntu

After installation, check Node.js version by entering below command,

node --version

Output:

$ node --version
v12.18.3

To Check NPM version.

npm --version

Output:

$ npm --version
6.14.6

Step #3: How to Install Angular CLI on Ubuntu 20.04 LTS

Run below command to install angular CLI.

sudo npm install -g @angular/cli

Output

/usr/bin/ng -> /usr/lib/node_modules/@angular/cli/bin/ng

> @angular/[email protected] postinstall /usr/lib/node_modules/@angular/cli
> node ./bin/postinstall/script.js

? Would you like to share anonymous usage data with the Angular Team at Google under
Google’s Privacy Policy at https://policies.google.com/privacy? For more details and
how to change this setting, see http://angular.io/analytics. Yes
+ @angular/[email protected]
added 277 packages from 207 contributors in 19.024s

Run below command to check install Angular Version.

ng --version

Sample Output:

Angular CLI: 10.1.1
Node: 12.18.3
OS: linux x64

Angular:
...
Ivy Workspace:

Package Version
------------------------------------------------------
@angular-devkit/architect 0.1001.1
@angular-devkit/core 10.1.1
@angular-devkit/schematics 10.1.1
@schematics/angular 10.1.1
@schematics/update 0.1001.1
rxjs 6.6.2

Step #4: Creating new Angular Project

Run following command to create New Angular Project named test-project.

ng new test-project

Output:

.....
...... 
added 1167 packages from 1048 contributors and audited 19053 packages in 72.14s
23 packages are looking for funding
  run `npm fund` for details
found 0 vulnerabilities
    Successfully initialized git.

Step #5: Running Angular Application

Once Project created successfully, navigate to project and Run your Application using ng server command.

cd test-project

ng serve 

Output:

angular cli

To Access Angular Application on browser, enable the port 4200 in firewall or inbound rule in Cloud.

http://localhost:4200

Successfully we have performed how to install angular CLI on Ubuntu 20.04 LTS.

Conclusion:

We have covered, How to Install Angular CLI on Ubuntu 20.04 LTS, Commands to check version of node JS,NPM and Angular, Creating and running test project in Angular.

Related Articles:

How to Install Angular CLI on Ubuntu 18.04/16.04 LTS

How to Install Latest Node.js and NPM on Ubuntu 19.04,18.04/16.04 LTS

FOSS TechNix

FOSS TechNix (Free,Open Source Software's and Technology Nix*) founded in 2019 is a community platform where you can find How-to Guides, articles for DevOps Tools,Linux and Databases.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Share via
Copy link
Powered by Social Snap