How Can I run PM2 with Angular-Cli? - Angular2

Question

How can I run: ng serve --prod with pm2?

ng serve from angular-cli, Angular2. I'm running on DigitalOcean.

I have tried to test with http-server -p 4200 -d false in the dist/ folder after ng build --prod

When I request from the domain https://www.unibookkh.com/, i got 404 error: (I've already setup nginx to listen to port 4200.

I test with http-server because I think I maybe can run pm2 through this command pm2 start my_app_process.json where

my_app_process.json

{
    "apps": [
        {
            "name": "angular",
            "cwd": "~/angular2",
            "args": "-p 4200 -d false",
            "script": "/usr/bin/http-server"
        }
    ]
}

Any better ideas of how to get it working with PM2?

Autointoxication

Answer 1

This command would work as expected:

after I run

ng build --prod

then run the following command in the dist/ folder

pm2 start /usr/bin/http-server -- -p 8080 -d false

Update

I have found a better solution: which ng then it will print /usr/bin/ng then type this

pm2 start /usr/bin/ng -- serve --prod

Autointoxication

I tried your method to run my application and have an error in pm2 log file. SyntaxError: missing ) after argument list – Delude

You can also do pm2 start $(which ng) – Cammi

It works perfectly but uses lots of memory (I know this is not a problem but a simple application less than 100 lines uses more than 400mb). of course this is a problem of angular app. I think the best way is build app for production and make a simple sh file and run it – Puttee

I tried that, it shows the instance status started, but it's not serving – Leeway

Answer 2

But, if you need ng serve for dev in preprod env, you can create a start.sh at root of your project

#!/bin/bash
ng serve --host xxx.xxx.xxx.xxx --port xxxx

And use pm2 like that :

pm2 start start.sh --name my-pretty-dev-app-run-on-preprod

;)

Confessor

@Julien Moulin, is there any other way then .sh file? using exisitng .json file can we do this? – Bullyrag

Your answer saved lot of time. – Baloney

Answer 3

With PM2 recent version

pm2 ecosystem

than update

ecosystem.config.js as follows

module.exports = {
  apps : [{
    name: 'demoapp',
    script: 'node_modules/@angular/cli/bin/ng',
    args: 'serve --host [yourip] --disable-host-check',
    instances: 1,
    autorestart: true,
    watch: false,
    max_memory_restart: '1G',
    env: {
      NODE_ENV: 'development'
    },
    env_production: {
      NODE_ENV: 'production'
    }
  }],

  deploy : {
  }
};

finally

pm2 start & pm2 save

Circumflex

great answer, deserves more upvotes - works on latest pm2 version - although see the tweak I had to make to this in my answer – Stacee

I have compeletely different content, so should I delet them all and put your code there? Should I modify app name or [your ip]? How? – Cobblestone

@user3486308 Yes you need to update the [app name] and [IP], Most important are script and args you can add these in your current config. if any issue please share config file via pastebin. – Circumflex

Answer 4

The following, for example, worked for me from the angular project: pm2 start "ng serve --host 0.0.0.0"

Keratoid

Answer 5

This worked for me. The key difference here between this answer and the other answers is that I had to use the cwd option since I was running pm2 from a root directory:

// pm2 start
// https://pm2.io/doc/en/runtime/guide/ecosystem-file
// https://pm2.io/doc/en/runtime/reference/ecosystem-file

module.exports = {
  apps: [{
    name: 'fe',
    script: 'node_modules/@angular/cli/bin/ng',
    args: 'serve -o',
    cwd: 'biblical-hebrew-fe',
    max_restarts: 5,
    min_uptime: 3000,
    exec_mode: 'fork',
    instances: 1, // default
    autorestart: true, // default
    watch: false, // default
    max_memory_restart: '1G', // default
    env: {
      NODE_ENV: 'development'
    },
    env_production: {
      NODE_ENV: 'production'
    }
  }],

  deploy: {
    production: {
      user: 'node',
      host: '212.83.163.1',
      ref: 'origin/master',
      repo: '[email protected]:repo.git',
      path: '/var/www/production',
      'post-deploy': 'npm install && pm2 reload ecosystem.config.js --env production'
    }
  }
}

Stacee

Answer 6

ng is a node module after all.

apps:
- name: ngserve
  script: 'node_modules/@angular/cli/bin/ng'
  args: 'serve --progress=false --live-reload=false --disable-host-check=true'
  watch: false
  log_date_format: YYYY-MM-DD HH:mm
  merge_logs: true
  out_file: "/dev/null"
  error_file: "/dev/null"

Dumfound

Answer 7

If you just want to serve static files, a new command has landed in pm2:

$ pm2 expose [path] [port]

Hollishollister

This answer doesn't really have anything to do with how to serve an angular2 app with pm2 – Alvera