How to Install Angular CLI on Ubuntu 20.04

Angular is the most popular framework used to build mobile and web applications. Angular is an open-source web application framework developed by Google an a large community of individuals. As of today, Angular 10 is the latest version available for the installation. This tutorial will help you to install Angular CLI node module on your Ubuntu 20.04 Linux system.

Step 1 – Installing Node.js

NVM is a command line tool for installing and managing node.js on Linux system. So first we need to install nvm on our system. Login to system with user for which you need to install Node.js, then execute below command to install nvm:

curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 

After that, you can install any version of node on your system. You can also install multiple node versions on single system. Execute below commands to load environment and install latest node.js version:

source ~/.bashrc
nvm install node

The above command will display the version of node and npm installed on your system.

Step 2 – Installing Angular CLI

After installing the node.js and npm on your system, use following commands to install Angular cli tool on your system.

npm install -g @angular/cli

The latest version of Angular CLI will be installed on your Ubuntu Linux system.

npm install -g @angular/[email protected]8        #Angular 8
npm install -g @angular/[email protected]9        #Angular 9
npm install -g @angular/[email protected]10       #Angular 10

Using the -g above command will install the Angular CLI tool globally. So it will be accessible to all users and applications on the system. Angular CLI provides a command ng used for command-line operations. Let’s check the installed version of ng on your system.

ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 10.1.1
Node: 14.10.1
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

Angular command line interface has been installed on your system. For the existing application, can start your work and ignore rest article.

Follow the next steps to create a new Angular application on your system.

Step 3 – Creating New Angular Application

You can use ng command to create a new angular application. Create application named hello-world using the Angular command line tool. Execute below command in terminal:

ng new hello-world

Output:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE hello-world/README.md (1028 bytes)
CREATE hello-world/.editorconfig (274 bytes)
CREATE hello-world/.gitignore (631 bytes)
CREATE hello-world/angular.json (3606 bytes)
CREATE hello-world/package.json (1254 bytes)
CREATE hello-world/tsconfig.json (458 bytes)
CREATE hello-world/tslint.json (3185 bytes)
CREATE hello-world/.browserslistrc (853 bytes)
CREATE hello-world/karma.conf.js (1023 bytes)
CREATE hello-world/tsconfig.app.json (287 bytes)
CREATE hello-world/tsconfig.spec.json (333 bytes)
CREATE hello-world/src/favicon.ico (948 bytes)
CREATE hello-world/src/index.html (296 bytes)
CREATE hello-world/src/main.ts (372 bytes)
CREATE hello-world/src/polyfills.ts (2835 bytes)
CREATE hello-world/src/styles.css (80 bytes)
CREATE hello-world/src/test.ts (753 bytes)
CREATE hello-world/src/assets/.gitkeep (0 bytes)
CREATE hello-world/src/environments/environment.prod.ts (51 bytes)
CREATE hello-world/src/environments/environment.ts (662 bytes)
CREATE hello-world/src/app/app-routing.module.ts (245 bytes)
CREATE hello-world/src/app/app.module.ts (393 bytes)
CREATE hello-world/src/app/app.component.css (0 bytes)
CREATE hello-world/src/app/app.component.html (25757 bytes)
CREATE hello-world/src/app/app.component.spec.ts (1072 bytes)
CREATE hello-world/src/app/app.component.ts (215 bytes)
CREATE hello-world/e2e/protractor.conf.js (869 bytes)
CREATE hello-world/e2e/tsconfig.json (294 bytes)
CREATE hello-world/e2e/src/app.e2e-spec.ts (644 bytes)
CREATE hello-world/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
    Successfully initialized git.

This will create a directory named hello-world in your current directory, and create all require files for an angular application.

Step 4 – Serve Angular Application

Your basic Angular application is ready to serve. Switch to directory hello-world and then run your angular application using the ng serve command.

cd hello-world
ng serve

By default angular application run on port 4200. You can access your system on port 4200 to open the angular application, like:

• http://localhost:4200

You can change host and port for running Angular application by providing –host and –port command line arguments.

ng serve --host 0.0.0.0 --port 8080

The IP address 0.0.0.0 listens on all interfaces and publicly accessible.

Conclusion

In this tutorial, you have learned to install angular command line utility as node package. This tutorial also helped you to create a new angular application. Now, visit here to configure angular application behind the Apache server.