HomeLinuxLearn how to Create and Run Angular Apps Utilizing Angular CLI and...

Learn how to Create and Run Angular Apps Utilizing Angular CLI and PM2


Angular CLI is a command-line interface for the Angular framework, which is used to create, construct and run your utility domestically whereas growing.

It’s designed to construct and check an Angular challenge on a growth server. Nonetheless, if you wish to run/hold your purposes alive ceaselessly in manufacturing, you want a Node.js course of supervisor reminiscent of PM2.

PM2 is a well-liked, superior, and feature-rich manufacturing course of supervisor for Node.js purposes with a built-in load balancer.

Its characteristic set consists of assist for utility monitoring, environment friendly administration of micro-services/processes, operating purposes cluster mode, and sleek restart and shutdown of purposes. Additionally, it helps simple administration of utility logs, and a lot extra.

On this article, we are going to present you the right way to run Angular purposes utilizing Angular CLI and PM2 Node.js course of supervisor. This lets you run your utility constantly throughout growth.

Necessities

It’s essential to have the next packages put in in your server to proceed:

Be aware: If you have already got Node.js and NPM put in in your Linux system, bounce to Step 2.

Step 1: Putting in Node.js in Linux

To put in the newest model of Node.js, first, add the NodeSource repository in your system as proven and set up the package deal. Don’t forget to run the proper command for the Node.js model you wish to set up in your Linux distribution.

Set up Node.js on Ubuntu

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_19.x | sudo -E bash - &&
$ sudo apt-get set up -y nodejs

------------- For Node.js v18.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash - &&
$ sudo apt-get set up -y nodejs

------------- For Node.js v16.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - &&
$ sudo apt-get set up -y nodejs

------------- For Node.js v14.x -------------
$ curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash - &&
$ sudo apt-get set up -y nodejs

Set up Node.js on Debian

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_19.x | bash - &&
$ sudo apt-get set up -y nodejs

------------- For Node.js v18.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_18.x | bash - &&
$ sudo apt-get set up -y nodejs

------------- For Node.js v16.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_16.x | bash - &&
$ sudo apt-get set up -y nodejs

------------- For Node.js v14.x ------------- 
$ curl -fsSL https://deb.nodesource.com/setup_14.x | bash - &&
$ sudo apt-get set up -y nodejs

Set up Node.js on RHEL-based Distributions

------------- For Node.js v19.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_19.x | sudo bash -
$ sudo yum set up -y nodejs

------------- For Node.js v18.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -
$ sudo yum set up -y nodejs

------------- For Node.js v16.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_16.x | sudo bash -
$ sudo yum set up -y nodejs

------------- For Node.js v14.x ------------- 
$ curl -fsSL https://rpm.nodesource.com/setup_14.x | sudo bash -
$ sudo yum set up -y nodejs

Apart from, additionally set up growth instruments in your system with the intention to compile and set up native addons from NPM.

$ sudo apt set up build-essential  [On Debian/Ubuntu]
# yum set up gcc-c++ make          [On CentOS/RHEL]
# dnf set up gcc-c++ make          [On Fedora]

After getting Node.js and NPM put in, you possibly can test their variations utilizing the next instructions.

$ node -v
$ npm -v
Check Node.js and NPM Version
Verify Node.js and NPM Model

Step 2: Putting in Angular CLI and PM2

Subsequent, set up Angular CLI and PM2 utilizing the npm package deal supervisor as proven. Within the following instructions, the -g choice means to put in the packages globally – usable by all system customers.

$ sudo npm set up -g @angular/cli        #set up Angular CLI
$ sudo npm set up -g pm2                 #set up PM2

Step 3: Creating an Angular Undertaking Utilizing Angular CLI

Now transfer into the webroot listing of your server, then create, construct, and serve your Angular app (referred to as sysmon-app, exchange this with the title of your app) utilizing Angular CLI.

$ cd /srv/www/htdocs/
$ sudo ng new sysmon-app        #comply with the prompts
Create New Angular App
Create New Angular App

Subsequent, transfer into the applying (full path is /srv/www/htdocs/sysmon-app) listing which has simply been created and serves the applying as proven.

$ cd sysmon-app
$ sudo ng serve
Serve Angular App Using Angular CLI
Serve Angular App Utilizing Angular CLI

From the output of the ng serve command, you possibly can see that the Angular app is just not operating within the background, you cannot entry the command immediate anymore. Subsequently you cannot execute some other instructions whereas it’s operating.

So, you want a course of supervisor to manage and handle the applying: run it constantly (ceaselessly) and in addition allow it to auto-start at system boot as defined within the subsequent part.

Earlier than you go to the following part, terminate the method by urgent [Ctl + C] to liberate the command immediate.

Terminate Running Angular App
Terminate Operating Angular App

Step 4: Operating Angular Undertaking Without end Utilizing PM2

To make your new utility run within the background, releasing up the command immediate, use PM2 to serve it, as proven. PM2 additionally aids widespread system administration duties reminiscent of restarting on failure, stopping, and reloading configurations with out downtime, and far more.

$ pm2 begin "ng serve" --name sysmon-app
Run Angular App Forever
Run Angular App Without end

Subsequent, to entry your utility’s net interface, open a browser and navigate utilizing the handle http://localhost:4200 as proven within the following screenshot.

Access Sysmon Angular App from Browser
Entry Sysmon Angular App from Browser

On this information, we’ve proven the right way to run Angular purposes utilizing Angular CLI and PM2 course of supervisor. When you have any extra concepts to share or questions, attain us through the suggestions type under.

If You Recognize What We Do Right here On TecMint, You Ought to Take into account:

TecMint is the quickest rising and most trusted group web site for any sort of Linux Articles, Guides and Books on the net. Thousands and thousands of individuals go to TecMint! to look or browse the hundreds of printed articles obtainable FREELY to all.

In case you like what you’re studying, please take into account shopping for us a espresso ( or 2 ) as a token of appreciation.

Support Us

We’re grateful to your by no means ending assist.

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments