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.
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 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
You can change host IP/name and port to run angular application.
ng serve --host 0.0.0.0 --port 4200
Output:
To Access Angular Application on browser, enable the port 4200 in firewall or inbound rule in Cloud.
http://localhost:4200
OR
http://IP or Hostname: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
Very useful, the unique tutorial that guided me straight to the goal: to Install Angular/CLI on Ubuntu 18.04
Thank you beaucoup
Thanks for your comment.