How To Install Angular on Ubuntu 20.04 LTS

Install Angular on Ubuntu 20.04

In this tutorial, we will show you how to install Angular on Ubuntu 20.04 LTS. For those of you who didn’t know, Angular is a JavaScript open-source framework which helps in developing single-page web applications suitable for web/mobile/desktop. Angular combines declarative templates, dependency injection, end to end tooling, and integrated best practices to solve development challenges. Angular empowers developers to build applications that live on the web, mobile, or the desktop.

This article assumes you have at least basic knowledge of Linux, know how to use the shell, and most importantly, you host your site on your own VPS. The installation is quite simple and assumes you are running in the root account, if not you may need to add ‘sudo‘ to the commands to get root privileges. I will show you through the step by step installation Angular on an Ubuntu 20.04 Focal Fossa. You can follow the same instructions for Ubuntu 18.04, 16.04, and any other Debian based distribution like Linux Mint.

Install Angular on Ubuntu 20.04 LTS Focal Fossa

Step 1. First, make sure that all your system packages are up-to-date by running these following apt commands in the terminal.

sudo apt update
sudo apt upgrade

Step 2. Installing Node.js.

Install Node.js and npm from Node Source. You simply need to add the PPA for the version you want to install:

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

To install, run the commands below:

sudo apt install nodejs

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

npm install npm@latest -g

Once done, verify the installation by running:

node --version
npm --version

Step 3. Installing Angular on Ubuntu 20.04.

Run the following commands to install Angular CLI tool on your system:

npm install -g @angular/cli

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

$ 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.2.1
@angular-devkit/schematics   10.2.1
@schematics/angular          10.2.1
@schematics/update           0.1001.2
rxjs                         6.6.4

Step 4. Creating a new Angular Application.

Now that we have Angular installed we can create a basic scaffolding for a new application. We will use our newly installed Angular CLI to accomplish this:

ng new idroot

First, change into the newly created directory for our application:

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

Step 5. Accessing Angular Web Interface.

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

Install Angular on Ubuntu 20.04

Congratulations! You have successfully installed Angular. Thanks for using this tutorial for installing Angular in Ubuntu 20.04 LTS Focal Fossa system. For additional help or useful information, we recommend you to check the official Angular website.

VPS Manage Service Offer
If you don’t have time to do all of this stuff, or if this is not your area of expertise, we offer a service to do “VPS Manage Service Offer”, starting from $10 (Paypal payment). Please contact us to get the best deal!