How to install Angular on Ubuntu 20.04 LTS

Angular is an open-source web application framework for building mobile and desktop web applications. It is written in TypeScript/JavaScript and was created in 2009 by Google. It is specially designed for building small to large scale applications from scratch. It comes with an Angular CLI utility that helps you to create, manage, build and test Angular applications.

In this tutorial, we will show you how to install Angular on Ubuntu 20.04.

Prerequisites

• A server running Ubuntu 20.04.
• A root password is configured on the server.

Install Node.js

Before starting, you will need to install Node.js and npm in your system. By default, the latest version of Node.js is not available in the Ubuntu 20.04 default repository. So you will need to add Node.js repository to your system.

First, add the Node.js repository with the following command:

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

Once added, install the Node.js with the following command:

apt-get install nodejs -y

Once installed, verify the installed version of Node.js with the following command:

node --version

You should see the following output:

v14.7.0

Next, update the npm version to the latest version by running the following command:

npm install [email protected] -g

Next, verify the npm version with the following command:

npm --version

You should get the following output:

6.14.7

Install Angular

You can install Angular using the npm as shown below:

npm install -g @angular/cli

Once installed, verify the installed version of Angular using the following command:

ng version

You should see the following output:

     _                      _                 ____ _     ___
    /    _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / ?  | '_  / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ | | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   __| |_|__, |__,_|_|__,_|_|       ____|_____|___|
                |___/
    

Angular CLI: 10.0.5
Node: 14.7.0
OS: linux x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1000.5
@angular-devkit/core         10.0.5
@angular-devkit/schematics   10.0.5
@schematics/angular          10.0.5
@schematics/update           0.1000.5
rxjs                         6.5.5

Create Angular Project

At this point, Angular is installed in your system. It’s time to create a new project with Angular.

First, change the directory to /opt and create a new project named myproject with the following command:

cd /opt

ng new myproject

Next, change the directory to the myproject and serve the project with the following command:

cd myproject

ng serve --host your-server-ip --port 8088

You should see the following output:

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/core : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/forms : es2015 as esm2015
Compiling @angular/platform-browser : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Compiling @angular/core/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic : es2015 as esm2015
Compiling @angular/platform-browser/testing : es2015 as esm2015
Compiling @angular/compiler/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/common/testing : es2015 as esm2015
Compiling @angular/router : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015

chunk {main} main.js, main.js.map (main) 60.6 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 12.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 2.65 MB [initial] [rendered]
Date: 2020-08-09T14:10:36.644Z - Hash: a053188b5496361814a2 - Time: 14873ms
** Angular Live Development Server is listening on 69.87.218.220:8088, open your browser on http://69.87.218.220:8088/ **
: Compiled successfully.

Access Angular Web Interface

At this point, Angular project is deployed and listening on port 8088. You can access it using the URL http://your-server-ip:8088. You should see the following screen:

Conclusion

Congratulations! you have successfully installed Angular on Ubuntu 20.04. Now you can start deploying your first project with Angular. One of the great feature of Angular is webpack hot reloading that deploys the change on live and saves your lot of time.