How to Install Angular on Ubuntu 22.04

Angular.js is a free and open-source JavaScript framework used for building dynamic applications. It allows you to use HTML as your template language to extend HTML's syntax to express your application's components clearly and succinctly. It offers a suite of tools to develop, update, and test code. It has many features, such as forms management, routing, etc.

This tutorial will show you how to install Angular.js with Nginx as a reverse proxy on Ubuntu 22.04.

Prerequisites

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

Getting Started

Before starting, updating and upgrading all system packages to the latest version is a good idea. You can update all of them by running the following command:

apt update -y
apt upgrade -y

Once all the packages are updated, you can install other required dependencies with the following command:

apt install curl gnupg2 gnupg git wget -y

Once you are finished, you can proceed to the next step.

Install Node.js

You will also need to install your server's latest stable version of Node.js. First, add the Node.js repository using the following command:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

You should get the following output:

## Run `sudo apt-get install -y nodejs` to install Node.js 16.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 | gpg --dearmor | sudo tee /usr/share/keyrings/yarnkey.gpg >/dev/null
     echo "deb [signed-by=/usr/share/keyrings/yarnkey.gpg] 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

Next, install the Node.js package with the following command:

apt install nodejs

Once the Node.js is installed, you can verify the Node version using the following command:

node --version

You will get the following output:

v16.17.0

Install Angular CLI

Next, you will need to install the Angular CLI on your server. Angular CLI is a command line tool that allows you to create and manage an Angular app via a command line interface.

First, update the NPM package to the latest version with the following command:

npm install npm@latest -g

Next, install the Angular CLI with the following command:

npm install -g @angular/cli

Once the Angular CLI is installed, you can verify the Angular version with the following command:

ng version

You should get the following output:

Global setting: enabled
Local setting: No local workspace configuration file.
Effective status: enabled

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

Angular CLI: 14.2.3
Node: 16.17.0
Package Manager: npm 8.19.2 
OS: linux x64

Angular: 
... 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1402.3 (cli-only)
@angular-devkit/core         14.2.3 (cli-only)
@angular-devkit/schematics   14.2.3 (cli-only)
@schematics/angular          14.2.3 (cli-only)

Create a Sample Angular Application

In this section, we will create a sample Angular application.

Run the following command to create a new application named myapp:

ng new myapp

You will get the following output:

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE myapp/src/styles.css (80 bytes)
CREATE myapp/src/test.ts (749 bytes)
CREATE myapp/src/assets/.gitkeep (0 bytes)
CREATE myapp/src/environments/environment.prod.ts (51 bytes)
CREATE myapp/src/environments/environment.ts (658 bytes)
CREATE myapp/src/app/app-routing.module.ts (245 bytes)
CREATE myapp/src/app/app.module.ts (393 bytes)
CREATE myapp/src/app/app.component.css (0 bytes)
CREATE myapp/src/app/app.component.html (23115 bytes)
CREATE myapp/src/app/app.component.spec.ts (1070 bytes)
CREATE myapp/src/app/app.component.ts (209 bytes)
? Packages installed successfully.

Next, change the directory to the myapp directory and run the application with the following command:

cd myapp
ng serve --host 0.0.0.0 --port 8000

If everything is fine, you will get the following output:

? Would you like to share pseudonymous usage data about this project 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 https://angular.io/analytics. Yes

? Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   2.10 MB | 
polyfills.js          | polyfills     | 318.00 kB | 
styles.css, styles.js | styles        | 210.08 kB | 
main.js               | main          |  49.83 kB | 
runtime.js            | runtime       |   6.51 kB | 

                      | Initial Total |   2.67 MB

Build at: 2022-09-18T07:17:07.899Z - Hash: d94baf4d66e9fad0 - Time: 26751ms

** Angular Live Development Server is listening on 0.0.0.0:8000, open your browser on http://localhost:8000/ **


? Compiled successfully.

Press the CTRL + C to stop the application. We will create a systemd service file for Angular application.

Create a Systemd Service File for Angular

You can create a systemd service file to manage the Angular application.

nano /lib/systemd/system/myapp.service

Add the following lines:

[Unit]
Description=MyWeb Application
After=network-online.target

[Service]
Restart=on-failure
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/ng serve --port 8000
CPUAccounting=true
CPUQuota=50%
MemoryAccounting=true
MemoryLimit=1024M

[Install]
WantedBy=multi-user.target

Save and close the file then reload the systemd daemon to apply the changes:

systemctl daemon-reload

Next, start and enable the Angular service with the following command:

systemctl start myapp
systemctl enable myapp

You can now check the status of the Angular service with the following command:

systemctl status myapp

You will get the following output:

? myapp.service - MyWeb Application
     Loaded: loaded (/lib/systemd/system/myapp.service; disabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-09-18 07:28:42 UTC; 28s ago
   Main PID: 56301 (ng serve --port)
      Tasks: 11 (limit: 4579)
     Memory: 380.1M (limit: 1.0G)
        CPU: 14.152s
     CGroup: /system.slice/myapp.service
             ??56301 "ng serve --port 8000" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Sep 18 07:28:42 ubuntu2204 systemd[1]: Started MyWeb Application.
Sep 18 07:28:49 ubuntu2204 ng[56301]: - Generating browser application bundles (phase: setup)...

You can now easily manage your Angular application via systemd. Once you are finished, you can proceed to the next step.

Configure Nginx as a Reverse Proxy for Angular

At this point, the Angular application is started and listens on port 8000. However, it is a good idea to configure the Nginx as a reverse proxy to access the Angular application via port 80.

First, install the Nginx web server package using the following command:

apt install nginx -y

Once the Nginx is installed, create an Nginx configuration file:

nano /etc/nginx/conf.d/app.conf

Add the following lines:

server {  
       listen 80;
       server_name app.example.com;
       location / {  
                  proxy_pass http://localhost:8000;  
                  proxy_http_version 1.1;  
                  proxy_set_header Upgrade $http_upgrade;  
                  proxy_set_header Connection 'upgrade';  
                  proxy_set_header Host $host;  
                  proxy_cache_bypass $http_upgrade;  
               }  
}

Save and close the file when you are finished then verify the Nginx for any syntax error with the following command:

nginx -t

You will get the following output:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Next, restart the Nginx service to apply the changes:

restart nginx

You can also check the status of the Nginx with the following command:

systemctl status nginx

You should get the following output:

? nginx.service - A high performance web server and a reverse proxy server
     Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
     Active: active (running) since Sun 2022-09-18 07:24:51 UTC; 6s ago
       Docs: man:nginx(8)
    Process: 55161 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 55162 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 55163 (nginx)
      Tasks: 3 (limit: 4579)
     Memory: 3.3M
        CPU: 28ms
     CGroup: /system.slice/nginx.service
             ??55163 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ??55164 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??55165 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Sep 18 07:24:51 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Sep 18 07:24:51 ubuntu2204 systemd[1]: Started A high performance web server and a reverse proxy server.

Access Angular Web UI

At this point, Nginx is configured as a reverse proxy for the Angular application. You can now access it using the URL http://app.example.com. You should see your Angular app on the following screen:

Conclusion

Congratulations! You successfully installed Angular with Nginx as a reverse proxy on Ubuntu 22.04. You can now develop and deploy a dynamic app on the web using the Angular.js framework. Feel free to ask me if you have any questions.

Share this page:

0 Comment(s)