Facebook Twitter Instagram
    TecAdmin
    • Home
    • FeedBack
    • Submit Article
    • About Us
    Facebook Twitter Instagram
    TecAdmin
    You are at:Home»AngularJs»Deploy an Angular Application with PM2

    Deploy an Angular Application with PM2

    By RahulSeptember 27, 20205 Mins Read

    PM2 is a process manager for Node.js applications. It is helpful for running Node.js application on production environment. PM2 keep an eye on your application and restart it automatically in case of application crashes. PM2 also have an build in load balancer for make easier to scale applications.

    Advertisement

    In this tutorial you will learn to install Angaular CLI on your Linux system. Then create a sample Angular application. Also run your Angular application with PM2 on a Linux system.

    Prerequisites

    To use this tutorial, you must have shell to your server with sudo privileged account. Login to your server and open shell to continue work.

    Step 1 – Install Node.js

    The systems doesn’t have Node.js installed, can use below commands to install Node.js on their system suing NVM (Node version manager).

    Run below command to install NVM on your system:

    curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash 
    

    Then install any Nodejs version recommended for your application. Below command will install Node.js 12 on your system. You can change any version number instead of 12.

    nvm install 12
    

    Once the installation completed successfully. View the installed version of Node.js and npm by running the following commands.

    node -v
    
    v12.18.2
    
    
    npm -v
    
    6.14.5
    
    

    Step 2 – Install Angular CLI with PM2

    Angular CLI is the command line utility to create, build and run Angular applications. It is available as Node module to install on any system have npm installed.

    Run the below command to install latest Angular cli application on your system:

    npm install -g @angular/cli 
    

    Also, install pm2 application by running the following command:

    npm install -g pm2 
    

    At this stage your system is create to create and run angular application.

    Step 3 – Create Angular Application

    Skip this step, if you already have your Angular application. Otherwise, let’s have create a sample Angular application on your system with few simple commands.

    Create and switch to directory to keep your Angular application.

    sudo mkdir -p /var/www/apps && cd /var/www/apps
    

    Then create a new application using ng new command followed by application name. Change my-angular-app with a suitable name for your application.

    ng new my-angular-app
    

    Following onscreen instruction to enable routing and select one of the stylesheet format. The below screenshot showing that I have enabled the Angular routing and select CSS for stylesheet.

    Create angular application with Angular CLI
    Create angular application with Angular CLI

    Wait for the installation to complete. After that this will create a directory with the same name of your application in current directory with all files of your Angular application.

    Switch to your application and start Angular application in development mode. By default ng serve start application on localhost only. I have used –host 0.0.0.0 to make application available for remote users.

    cd my-angular-app
    ng serve --host 0.0.0.0
    

    Once service started, Access your application in a web browser. The default Angular listen on port 4200. In case any other application uses the same port, specify another port using –port with a port number.

    Running Angular Application with PM2

    Step 4 – Run Angular with PM2

    In this step we will describe you to how to run Angular app with pm2 command. You can set run time behaviors of pm2 by providing the inputs on command line. Here we are discussing with quickly used options with pm2. Read one by one and use as per your requirements.

    1. This will simply start Angular server to serve your application on 127.0.0.1 (localhost) and port 4200. After starting service you can access your application on from local machine only.

    pm2 start "ng serve"
    

    2. Here we are instructing ng to start application application on all system interfaces. So any user can access it from system systems. But this will still use default port 4200.

    pm2 start "ng serve --host 0.0.0.0"
    

    3. Next, you can customize your ng server command to run on specific port. For example, below command will start Angular application on port 8082.

    pm2 start "ng serve --host 0.0.0.0 --port 8082"
    

    4. Change the name of your application on pm2. Use –name parameter with pm2 command followed by your application name.

    pm2 start "ng serve --host 0.0.0.0 --port 8082" --name "My Angular App"
    

    5. Enabling watch is another great feature of pm2. While enabling pm2 keep watch about changes on specified directory. It will also restart the application after getting any changes in files. This reduces your pain of restarting application after making changes everytime.

    pm2 start "ng serve --host 0.0.0.0 --port 8082" --name "My Angular App" --watch /var/www/apps/my-angular-app
    

    Once you started your Angular application using pm2. Run the following command to view the status of your application.

    pm2 status
    
    Check PM2 Status of Angular Application
    Check PM2 Status of Angular Application

    For any issues, you can run pm2 logs command followed by the application id showing in above command. This will display application and error log on screen.

    pm2 logs 0
    

    Conclusion

    In this tutorial you have learned to deploy Angular application using pm2 on any Linux system.

    Angular node pm2
    Share. Facebook Twitter Pinterest LinkedIn Tumblr Email WhatsApp

    Related Posts

    How to Create React.js Application on macOS

    Running “npm start” with PM2

    How to Install Bower on Ubuntu 22.04 & 20.04

    View 3 Comments

    3 Comments

    1. Jonny on March 14, 2021 10:09 pm

      I realize this is old, but it may help someone in the future:

      use a ecosystem.config.js (check pm2 documentation):

      for my angular app this works:

      module.exports = {
      apps : [{
      name: ‘project-controls-webapp’,
      script: ‘node_modules/@angular/cli/bin/ng’,
      args: “serve –prod”,
      watch: ‘.’
      }],

      deploy : {
      production : {
      user : ‘node’,
      host : ‘localhost’,
      ref : ‘origin/master’,
      repo : ‘GIT_REPOSITORY’,
      path : ‘/dist’,
      ‘pre-deploy-local’: ”,
      ‘post-deploy’ : ‘npm install && pm2 reload ecosystem.config.js –env production’,
      ‘pre-setup’: ”
      }
      }
      };

      Reply
    2. Pranav Jain on November 18, 2020 4:45 pm

      This runs the development server and is not ideal for production. Page is not optimised so not the best performance, consumes a lot of memory, and large bundle size so bad page loads.

      You may want to add –prod tag for production mode. `pm2 start “ng serve –prod –host 0.0.0.0 –port 8082” –name “My Angular App”`. However, this also has some security issues.

      However, an even better way would be to build the angular app using `ng build –prod` and then serve the static assets in dist/my-angular-app using pm2 by using `pm2 serve –spa dist/my-angular-app –name “My Angular App” –port=8082`. Best performance, memory (server’s) consumption, bundle size, most secure, etc.

      Hope this helps.

      Reply
    3. Abhishek Nikam on August 17, 2020 12:46 pm

      Hi,

      I have followed your all steps. I’m using windows 7.
      when i hit pm2 start “ng serve” it gives me error like : [PM2][ERROR] Script not found.

      Could you please help me to sort out this issue. I’m using Angular 9

      Thank you.

      Reply

    Leave A Reply Cancel Reply

    Advertisement
    Recent Posts
    • How to List Manually Installed Packages in Ubuntu & Debian
    • 10 Bash Tricks Every Developer Should Know
    • How to Validate Email Address in JavaScript
    • Firewalld: Common Firewall Rules and Commands
    • 12 Apk Commands in Alpine Linux Package Management
    Facebook Twitter Instagram Pinterest
    © 2023 Tecadmin.net. All Rights Reserved | Terms  | Privacy Policy

    Type above and press Enter to search. Press Esc to cancel.