How to ng serve and npm start together?

Asked by At

This MEAN sample, ng serve starts the app fine at port 4200 but can't fetch data as Fiddler shows it fails calling an API at port 3000.

enter image description here

How to start npm alongside ng?

/package.json

"name": "awesome-bucketlist",
  "version": "1.0.0",
  "description": "A simple bucketlist app using MEAN stack",
  "main": "app.js",
  "scripts": {
    "start": "node app"
  }

/angular-src/package.json:

{
  "name": "angular-src",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

launch.json

{
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000/bucketlist",
            "webRoot": "${workspaceFolder}/app.js"
        }

2 Answers

0
Mike Bagnasco On

In your package.json, you can chain commands together using &&.

Ex:

"scripts": {
    "start": "./some_script_to_start_angular.sh && node app"
}
0
Jeb50 On

Anyway I finally realized having both Api and UI in the same folder/project/solution is not practical. An API is not specific to an UI, it's a universal DLL/service, should be siting somewhere by itself. So I separated them into two diff folders and have 2 VSC instances to run them:

  1. start the API in debug mode
  2. in 2nd VSC, run ng serve and let it take time to build, when "Compiled successfully" go to launch.json to start the debug entry associated with Chrome they work perfectly.