How to Install Angular on Ubuntu/Debian

Angular is a framework for web applications developed in TypeScript and is open source, maintained by Google. It is used to create and maintain single-page web applications.

Its goal is to enhance browser-based applications with Model View Controller (MVC) capabilities, in an effort to make development and testing easier.

The library reads the HTML containing additional custom tag attributes, then follows the directives of the custom attributes and binds the page's input or output elements to a model represented by standard variables in JavaScript.

This article explains how to install Angular on an Ubuntu 20.04 LTS system, although it can also be followed for a Debian distribution.

Installing NodeJS and Angular

The first step is to add the NodeJS repository. To do this, you can run the script they provide:

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

You can now install NodeJS:

# apt install nodejs -y && node --version

Once installed, update NPM:

# npm install npm@latest -g && npm --version

Then install Angular:

# npm install -g @angular/cli && ng version

Angular will now be installed. For an existing application, you can start your work and skip creating the project.

Creating an Angular Project

First, go to the location where you want to store the project:

# cd /opt

Then create the project, specifying its name:

# ng new miproyecto

You will be asked which style to choose: CSS, SASS, LESS, or Stylus.

Once you have selected the style and created the project, go to the directory:

# cd miproyecto

To serve the project, simply specify the server's IP address and your desired port:

# ng serve --host 127.0.0.1 --port 8080

Creating a Service for Angular

If you want to automate project startup, you can create a service:

# nano /etc/systemd/system/miproyecto.service

Add the following content to the file (remember to change the example location):

[Unit]
  Description=Proyecto Angular daemon
  After=network-online.target

[Service]
  User=root
  Group=root
  WorkingDirectory=/opt/miproyecto
  ExecStart=/usr/bin/ng serve --host 127.0.0.1 --port 8080

[Install]
  WantedBy=multi-user.target

Then enable and start the service:

# systemctl enable miproyecto && systemctl start miproyecto

Finally, check the status:

# systemctl status miproyecto

Configuring a Reverse Proxy with NGINX

If you want to configure an SSL certificate with Let's Encrypt, you can use a reverse proxy with NGINX and obtain the certificate with Certbot. First, install NGINX and Certbot:

# apt install nginx python3-certbot-nginx -y

Once the packages are installed, remove the default site:

# rm /etc/nginx/sites-enabled/default

Then create the configuration file for the project:

# nano /etc/nginx/sites-enabled/miproyecto.conf

With the following content (remember to change the example domain):

server {
 listen 80;
 server_name ejemplo.dominio.com;
 location / {
   proxy_pass http://localhost:8080;
   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;
 }
}

Once the file is created, restart NGINX and obtain the certificate with Certbot:

# systemctl restart nginx && certbot --nginx --redirect -d ejemplo.dominio.com 

We hope this tutorial has helped you. Have you tried it? Leave us your comments! 

Remember, if you have any questions about this or any other issue related to your servers on Clouding, feel free to write to soporte@clouding.io We're here to help with whatever you need! 🙂