When to use 'npm start' and when to use 'ng serve'?
ng serve
serves an Angular project via a development server
npm start
runs an arbitrary command specified in the package's "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.
It seems like ng serve
starts the embedded server whereas npm start
starts the Node servers.
Can someone throw some light on it?
Solution 1:
npm start
will run whatever you have defined for the start
command of the scripts
object in your package.json
file.
So if it looks like this:
"scripts": {
"start": "ng serve"
}
Then npm start
will run ng serve
.
Solution 2:
For a project that's using the CLI, you will usually use ng serve. In other cases you may want to use npm start. Here the detailed explanation:
ng serve
Will serve a project that is 'Angular CLI aware', i.e. a project that has been created using the Angular CLI, particularly using:
ng new app-name
So, if you've scaffolded a project using the CLI, you'll probably want to use ng serve
npm start
This can be used in the case of a project that is not Angular CLI aware (or it can simply be used to run 'ng serve' for a project that's Angular CLI aware)
As the other answers state, this is an npm command that will run the npm command(s) from the package.json that have the identifier 'start', and it doesn't just have to run 'ng serve'. It's possible to have something like the following in the package.json:
"scripts": {
"build:watch": "tsc -p src/ -w",
"serve": "lite-server -c=bs-config.json",
"start": "concurrently \"npm run build:watch\" \"npm run serve\""
...
},
"devDependencies": {
"concurrently": "^3.2.0",
"lite-server": "^2.2.2",
In this case, 'npm start' will result in the following commands to be run:
concurrently "npm run build:watch" "npm run serve"
This will concurrently run the TypeScript compiler (watching for code changes), and run the Node lite-server (which users BrowserSync)
Solution 3:
From the document
npm-start :
This runs an arbitrary command specified in the package's "start" property of its "scripts" object. If no "start" property is specified on the "scripts" object, it will run node server.js.
which means it will call the start scripts inside the package.json
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite --baseDir ./app --port 8001\" ",
"lite": "lite-server",
...
}
ng serve:
Provided by angular/angular-cli to start angular2 apps which created by angular-cli. when you install angular-cli, it will create ng.cmd under C:\Users\name\AppData\Roaming\npm
(for windows) and execute "%~dp0\node.exe" "%~dp0\node_modules\angular-cli\bin\ng" %*
So using npm start
you can make your own execution where is ng serve
is only for angular-cli
See Also : What happens when you run ng serve?
Solution 4:
There are more than that. The executed executables are different.
npm run start
will run your projects local executable which is located in your node_modules/.bin.
ng serve
will run another executable which is global.
It means if you clone and install an Angular project which is created with angular-cli version 5 and your global cli version is 7, then you may have problems with ng build.
Solution 5:
If you want to run angular app ported from another machine without ng
command
then edit package.json
as follows
"scripts": {
"ng": "ng",
"start": "node node_modules/.bin/ng serve",
"build": "node node_modules/.bin/ng build",
"test": "node node_modules/.bin/ng test",
"lint": "node node_modules/.bin/ng lint",
"e2e": "node node_modules/.bin/ng e2e"
}
Finally run usual npm start
command to start build server.