Angular CLI on Ubuntu 18.10

2019-10-05 System Programing @JS

Requirements: user with root privileges or non-root user with sudo privileges.

$ sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
$ sudo apt install nodejs build-essential -y
$ node -v
$ npm -v
$ sudo npm install -g @angular/cli
$ ng --version
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/

Angular CLI: 8.1.2
Node: 12.7.0
OS: linux x64
Angular:
[...]

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.801.2
@angular-devkit/core         8.1.2
@angular-devkit/schematics   8.1.2
@schematics/angular          8.1.2
@schematics/update           0.801.2
rxjs                         6.4.0

Creating an Angular project using Angular CLI

$ sudo ufw allow 4200/tcp
$ sudo ufw reload
$ cd /var/www/html/
$ sudo ng new lnxtest-app

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
[...]

$ cd lnxtest-app
$ sudo ng serve

 10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered] 
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 4.07 MB [initial] [rendered]
Date: 2019-07-26T21:33:02.465Z - Hash: 3a29e7a67a4e0e36c281 - Time: 12275ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

Note: If you use the command ng serve to build an application and serve it locally, the server automatically rebuilds the app and reloads the web page(s) when you change any of the source files.

Angular app is not running in the background, you can not access the command line. Terminate the process by pressing [Ctl+C] to release the command prompt. You need a process manager to control and manage the application.

PM2 installation and launch of the Angular project using PM2

$ sudo npm install -g pm2
$ pm2 start "ng serve" --name lnxtest-app

                        -------------

__/\\\\\\\\\\\\\____/\\\\____________/\\\\____/\\\\\\\\\_____
 _\/\\\/////////\\\_\/\\\\\\________/\\\\\\__/\\\///////\\\___
  _\/\\\_______\/\\\_\/\\\//\\\____/\\\//\\\_\///______\//\\\__
   _\/\\\\\\\\\\\\\/__\/\\\\///\\\/\\\/_\/\\\___________/\\\/___
    _\/\\\/////////____\/\\\__\///\\\/___\/\\\________/\\\//_____
     _\/\\\_____________\/\\\____\///_____\/\\\_____/\\\//________
      _\/\\\_____________\/\\\_____________\/\\\___/\\\/___________
       _\/\\\_____________\/\\\_____________\/\\\__/\\\\\\\\\\\\\\\_
        _\///______________\///______________\///__\///////////////__


                          Runtime Edition

        PM2 is a Production Process Manager for Node.js applications
                     with a built-in Load Balancer.

                Start and Daemonize any application:
                $ pm2 start app.js

                Load Balance 4 instances of api.js:
                $ pm2 start api.js -i 4

                Monitor in production:
                $ pm2 monitor

                Make pm2 auto-boot at server restart:
                $ pm2 startup

                To go further checkout:
                http://pm2.io/


                        -------------

[PM2] Spawning PM2 daemon with pm2_home=/home/serwis/.pm2
[PM2] PM2 Successfully daemonized
[PM2] Starting /bin/bash in fork_mode (1 instance)
[PM2] Done.
┌─────────────┬────┬─────────┬──────┬──────┬────────┬─────────┬────────┬─────┬──────────┬────────┬──────────┐
│ App name    │ id │ version │ mode │ pid  │ status │ restart │ uptime │ cpu │ mem      │ user   │ watching │
├─────────────┼────┼─────────┼──────┼──────┼────────┼─────────┼────────┼─────┼──────────┼────────┼──────────┤
│ lnxtest-app │ 0  │ N/A     │ fork │ 5423 │ online │ 0       │ 0s     │ 0%  │ 1.1 MB   │ serwis │ disabled │
└─────────────┴────┴─────────┴──────┴──────┴────────┴─────────┴────────┴─────┴──────────┴────────┴──────────┘
 Use `pm2 show <id|name>` to get more details about an app

To access the web interface of the application, open your browser and go to http://localhost:4200.

Reference: The Angular CLI, PM2 Homepage