Angular is a popular open-source web application framework primarily maintained by Google and a community of developers. It is used for building dynamic, single-page web applications (SPAs) and progressive web applications (PWAs). Angular is written in TypeScript, a superset of JavaScript, and offers a comprehensive set of features for front-end development.

This tutorial will show you how to install Angular on Ubuntu 22.04.

Step 1 – Install Nodejs

Before starting, you will need to install Nodejs on your server. Follow the below steps to install the latest stable version of Nodejs.

First, create a directory to store the Nodejs GPG key.

mkdir -p /etc/apt/keyrings

Download the Nodejs GPG key to the above directory.

curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg

Add the Nodejs repository to the APT source file.

echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_18.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list

Update the repository index.

apt update

Finally, install the Nodejs using the following command:

apt install nodejs

After the installation, you can verify the Nodejs version using the following command:

node --version

Output:

v18.11.0

Step 2 – Install Angular CLI

Angular CLI is a powerful tool provided by the Angular team to streamline the development process of Angular applications. It offers a set of commands and tools that automate repetitive tasks and provide a structured workflow for creating, building, testing, and deploying Angular applications.

First, update NPM with the latest version.

npm install npm@latest -g

Next, install Angular CLI using the NPM command:

npm install -g @angular/cli

After the installation, you can verify the Angular CLI version using the following command:

ng version

Output:

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

Angular CLI: 17.3.1
Node: 18.19.1
Package Manager: npm 10.5.0
OS: linux x64

Angular:

Step 3 – Create an Application Using Angular CLI

You can easily use the ng command to create a new Angular application via the command line.

ng new angular-app

Select the CSS and press Enter to create a new Angular app.

? Which stylesheet format would you like to use? (Use arrow keys)
❯ CSS             [ https://developer.mozilla.org/docs/Web/CSS                     ] 
  Sass (SCSS)     [ https://sass-lang.com/documentation/syntax#scss                ] 
  Sass (Indented) [ https://sass-lang.com/documentation/syntax#the-indented-syntax ] 
  Less            [ http://lesscss.org                                             ] 
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? Yes

Next, change the directory to your application and start Angular locally.

cd angular-app
ng serve

Press the CTRL+C to stop the application.

Step 4 – Access Angular Application

To make the Angular application accessible from the outside network, you will need to start it using the –host parameter.

ng serve --host 0.0.0.0 --port 3001

This will start the Angular application on all network interfaces on port 3001, as shown below:

Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:3001/
  ➜  Network: http://209.23.9.25:3001/

  ➜  press h + enter to show help

You can now access your Angular application using the URL http://your-server-ip:3001 from your web browser.

Conclusion

You can now easily install and use Angular on the Ubuntu 22.04 server. Overall, Angular is a comprehensive framework that empowers developers to build modern, responsive, and scalable web applications with ease. Its rich feature set, strong community support, and backing from Google make it a popular choice for web development projects of all sizes. Try Angular CLI on dedicated server hosting from Atlantic.Net!