When To Use 'npm Start' And When To Use 'ng Serve'? - Stack Overflow

1. 1. Home
   2. Questions
   3. Tags
   4. Users
   5. Companies
   6. Labs
   7. Jobs
   8. Discussions
   9. Collectives

   10. Communities for your favorite technologies. Explore all Collectives

2. Teams

   Ask questions, find answers and collaborate at work with Stack Overflow for Teams.

   Try Teams for free Explore Teams
3. Teams

4. Ask questions, find answers and collaborate at work with Stack Overflow for Teams. Explore Teams

Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Learn more about Collectives

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Learn more about Teams

Get early access and see previews of new features.

Learn more about Labs When to use 'npm start' and when to use 'ng serve'? Ask Question Asked 8 years, 2 months ago Modified 3 years, 2 months ago Viewed 289k times 226

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?

• angular
• angular-cli

Share Improve this question Follow edited Jul 28, 2017 at 14:00 CommunityBot 111 silver badge asked Oct 22, 2016 at 9:34 ishandutta2007ishandutta2007 18.2k1919 gold badges101101 silver badges148148 bronze badges 1

• 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 Commented Oct 22, 2016 at 9:38

Add a comment |

6 Answers 6

Sorted by: Reset to default Highest score (default) Trending (recent votes count more) Date modified (newest first) Date created (oldest first) 288

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.

Share Improve this answer Follow answered Oct 22, 2016 at 9:39 PuigcerberPuigcerber 10.1k66 gold badges4141 silver badges5151 bronze badges 4

• 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 Commented Oct 22, 2016 at 9: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 Commented Oct 22, 2016 at 9: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 Commented Dec 7, 2017 at 1: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 Commented Apr 15, 2022 at 21:21

Add a comment | 61

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)

Share Improve this answer Follow edited Mar 25, 2018 at 22:29 answered Dec 7, 2017 at 1:13 Chris HalcrowChris Halcrow 31.8k1919 gold badges194194 silver badges228228 bronze badges 2

• 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 Commented Feb 20, 2018 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 Commented Mar 23, 2018 at 18:57

Add a comment | 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?

Share Improve this answer Follow edited May 23, 2017 at 12:02 CommunityBot 111 silver badge answered Oct 22, 2016 at 10:01 vels4jvels4j 11.3k55 gold badges4242 silver badges6666 bronze badges 1

• Or it may give npm ERR! missing script: start – Leo Commented Nov 16, 2017 at 19:58

Add a comment | 9

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.

Share Improve this answer Follow edited Apr 7, 2019 at 20:03 answered Apr 3, 2019 at 19:09 yusuf tezelyusuf tezel 1,2821414 silver badges1919 bronze badges 1

• 1 this should be actual answer – Rishabh Agrawal Commented Sep 8, 2021 at 17:34

Add a comment | 7

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. :)

Share Improve this answer Follow edited Oct 27, 2021 at 4:36 sajadre 1,18122 gold badges1717 silver badges3333 bronze badges answered Jan 11, 2021 at 8:10 TyiliyraTyiliyra 43955 silver badges1515 bronze badges Add a comment | 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.

Share Improve this answer Follow answered Feb 8, 2020 at 12:37 smamransmamran 78922 gold badges1414 silver badges2323 bronze badges Add a comment |

Your Answer

Reminder: Answers generated by artificial intelligence tools are not allowed on Stack Overflow. Learn more

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.
• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Draft saved Draft discarded

Sign up or log in

Sign up using Google Sign up using Email and Password Submit

Post as a guest

Name Email

Required, but never shown

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged

• angular
• angular-cli

or ask your own question.

• The Overflow Blog
• How developer jobs (and the job market) changed in 2024
• You should keep a developer’s journal
• Featured on Meta
• The December 2024 Community Asks Sprint has been moved to March 2025 (and...
• Stack Overflow Jobs is expanding to more countries

Linked

169 Get angular-cli to ng serve over HTTPS 81 What happens when you run ng serve? 14 Proxy configuration is not working in angular 6 10 Angular - ng serve vs npm start 3 Can't carry out ng serve in VISUAL STUDIO CODE, angular cli 0 how can I get this angular project up and running? 0 Connection refused: localhost:4200 favicon.ico 502 in angular 7 1 Migration from Node 14 to Node 18 - The injectable 'PlatformNavigation' needs to be compiled using the JIT compiler, but '@angular/compiler' 0 How can I execute Vue-3-playground on my laptop? -3 I am facing Issues while running npm start cmd See more linked questions

Related

6 Angular JS 2 Difference between npm and ng(Angular-Cli) (Built tool) 16 What is the difference between Angular CLI and quickstart? 12 What's the difference between angular-cli and @angular/cli on npm 10 Angular - ng serve vs npm start 3 should i use angular-cli for projects 13 Angular 4 ng serve --prod vs ng serve 86 What is difference between ng build and ng serve? 30 Difference between "npm run dev" and "npm start" 2 Angular ng build vs. ng serve performance 1 Difference between deploying `index.html` vs. `npm start` for local Node project?

Hot Network Questions

• Elementary consequence of non-abelian class field theory
• CD with physical hole is perfectly readable - how?
• Is the second-quantized density-density interaction positive-definite?
• Where did Tolstoy write that a man is like a fraction?
• Do “extremely singular” functions exist?
• Can I bring candles on a European flight?
• A self-crossing image
• Can you attempt a risky task without risking your mind or body?
• PSE Advent Calendar 2024 (Day 24): 'Twas the Meta before Christmas
• Almost every Hermitian matrix has distinct eigenvalue differences
• Multiple macro definitions from a comma-separated list
• Are these two circuits equivalent? How to prove it?
• proper method to reduce 2 inch pipe to 1.5 inch pipe
• Why is Curl licensed under an MIT-like license despite using a GPL library?
• Can I use copyleft-licensed library in MIT-licensed project?
• Natural transformation using tikz
• Refereeing a maths paper with individually poor-quality results which nevertheless combine two very different subfields
• Sci-Fi Book with a girl who travels through space with a laptop
• Replace accented characters with perl-rename
• Extract-expand KDF using AES
• Is Luke 4:8 enjoining to "worship and serve" or serve only
• Should a language have both null and undefined values?
• How to differentiate coyote vs wolf tracks
• LM358 low output in simulation

more hot questions Question feed Subscribe to RSS Question feed

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

lang-js