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.
Table of Contents
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 yarnInstall 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.024sRun 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.2Step #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:
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
