How to Install Angular CLI on Ubuntu 18.04/16.04 LTS

In this article, we are going to How to Install Angular CLI on Ubuntu 18.04/16.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 18.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

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: Install Angular CLI on Ubuntu

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.

sudo 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 install angular CLI on Ubuntu.

Conclusion:

We have covered, How to Install Angular CLI on Ubuntu, 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 20.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