217

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?

Community
  • 1
  • 1
ishandutta2007
  • 16,676
  • 16
  • 93
  • 129
  • 1
    Have you looked at what that `start` command in the `scripts` object in your `package.json` does? Why do you think there's any difference at all? – jonrsharpe Oct 22 '16 at 09:38

6 Answers6

280

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.

Puigcerber
  • 9,814
  • 6
  • 40
  • 51
  • Also, per the quote the OP already had: If no "start" property is specified on the "scripts" object, it will run `node server.js` (which will fail if that file isn't there). – jonrsharpe Oct 22 '16 at 09:41
  • 1
    Yeah, but angular-cli creates the start command upon initialization so if he hasn't modified it should be the same command. – Puigcerber Oct 22 '16 at 09:44
  • 11
    Note: Using `npm start` is better. In order to use `ng serve` you need to install angular cli globally or reference it from the node modules bin. – Kyle Pfromer Dec 07 '17 at 01:57
  • This answer is misleading, look at my answer. For those who don’t want to scroll: the executed executables are different. “npm run something” command will execute your projects local binary located in node_modules/.bin/something. “ng serve” will execute another executable and you can look the location of the binary up using “where ng” in windows and “whereis ng” in Linux. – yusuf tezel Apr 15 '22 at 21:21
57

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)

Chris Halcrow
  • 28,994
  • 18
  • 176
  • 206
  • 1
    I think the only reason you got downvotes might be because you more or less repeated what was told in the marked answer. – Kostrzak Feb 20 '18 at 16:03
  • 1
    I would prefer you start with a one sentence statement that tells me when to use one or the other and then follow it up with what you've provided. I would start with... On a small project, they can be the same thing, npm start can simply run ng serve. When a project grows, or more steps are needed then npm start is npm standard for starting/running applications. I almost provided an answer and then after reading what you provided realized there was no need. Your answer was very good. – PatS Mar 23 '18 at 18:57
15

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?

Community
  • 1
  • 1
vels4j
  • 11,208
  • 5
  • 38
  • 63
7

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.

yusuf tezel
  • 1,232
  • 13
  • 18
5

The best answer is great, short and on point, but I would like to put my pennyworth.

Basically npm start and ng serve can be used interchangeably in Angular projects as long as you do not want the command to do additional stuff. Let me elaborate on this one.

For example, you may want to configure your proxy in package.json start script like this: "start": "ng serve --proxy-config proxy.config.json",

Obviously sole use of ng serve will not be enough.

Another instance is when instead of using the defaults you need to use some additional options ad hoc like defining the temporary port: ng serve --port 4444

Some parameters are only available to ng serve, others to npm start. Notice that the port option works for both, so in that case, it is up to your taste, again. :)

sajadre
  • 1,141
  • 2
  • 15
  • 30
Tyiliyra
  • 359
  • 3
  • 14
4

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.

smamran
  • 741
  • 2
  • 14
  • 20