Quand utiliser 'npm start' et quand utiliser 'ng serve'?

157

ng serve sert un projet Angular via un serveur de développement

 

npm startexécute une commande arbitraire spécifiée dans la propriété "start" du package de son objet "scripts". Si aucune propriété "start" n'est spécifiée sur l'objet "scripts", il exécutera le nœud server.js.

Il semble que ng servedémarre le serveur intégré alors que npm startdémarre les serveurs Node.

Quelqu'un peut-il jeter un peu de lumière là-dessus?

angular angular-cli ishandutta2007
la source
1
Avez-vous regardé ce que fait cette startcommande dans l' scriptsobjet dans votre package.json? Pourquoi pensez-vous qu'il y ait une différence?
jonrsharpe

Réponses:

206

npm startexécutera ce que vous avez défini pour la startcommande de l' scriptsobjet dans votre package.jsonfichier.

Donc, si cela ressemble à ceci:

"scripts": {
  "start": "ng serve"
}

Puis npm startcourra ng serve.

Puigcerber
la source
De plus, selon la citation que l'OP avait déjà: Si aucune propriété "start" n'est spécifiée sur l'objet "scripts", il s'exécutera node server.js(ce qui échouera si ce fichier n'est pas là).
jonrsharpe
1
Ouais, mais angular-cli crée la commande de démarrage lors de l'initialisation, donc s'il n'a pas modifié, ce devrait être la même commande.
Puigcerber
7
Remarque: il npm startest préférable d' utiliser . Pour l'utiliser, ng servevous devez installer angular cli globalement ou le référencer à partir du bin des modules de nœuds.
Kyle Pfromer
43

Pour un projet qui utilise la CLI, vous utiliserez généralement ng serve. Dans d'autres cas, vous souhaiterez peut-être utiliser npm start. Voici l'explication détaillée:

ng servir

Servira un projet qui est « CLI angulaire conscient », à savoir un projet qui a été créé à l' aide de la CLI angulaire, en particulier en utilisant:

ng new app-name

Donc, si vous avez échafaudé un projet à l'aide de la CLI, vous voudrez probablement utiliser ng serve

npm début

Cela peut être utilisé dans le cas d'un projet qui n'est pas compatible avec Angular CLI (ou il peut simplement être utilisé pour exécuter 'ng serve' pour un projet qui prend en charge Angular CLI)

Comme l'indiquent les autres réponses, il s'agit d'une commande npm qui exécutera la ou les commandes npm du package.json qui ont l'identificateur «start», et il ne suffit pas d'exécuter «ng serve». Il est possible d'avoir quelque chose comme ce qui suit dans le 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",

Dans ce cas, 'npm start' entraînera l'exécution des commandes suivantes:

concurrently "npm run build:watch" "npm run serve"

Cela exécutera simultanément le compilateur TypeScript (en surveillant les changements de code) et exécutera le serveur Node lite (dont les utilisateurs sont BrowserSync)

Chris Halcrow
la source
1
Je pense que la seule raison pour laquelle vous avez obtenu des votes négatifs est peut-être parce que vous avez plus ou moins répété ce qui était dit dans la réponse marquée.
Kostrzak
1
Je préférerais que vous commenciez par un énoncé d'une phrase qui me dise quand utiliser l'un ou l'autre, puis que vous suiviez ce que vous avez fourni. Je commencerais par ... Sur un petit projet, ils peuvent être la même chose, npm start peut simplement exécuter ng serve. Lorsqu'un projet se développe ou que plusieurs étapes sont nécessaires, npm start est la norme npm pour démarrer / exécuter des applications. J'ai presque fourni une réponse et après avoir lu ce que vous avez fourni, j'ai réalisé que ce n'était pas nécessaire. Votre réponse était très bonne.
PatS
13

À partir du document

npm-start :

Cela exécute une commande arbitraire spécifiée dans la propriété "start" du package de son objet "scripts". Si aucune propriété "start" n'est spécifiée sur l'objet "scripts", il exécutera le nœud server.js.

ce qui signifie qu'il appellera les scripts de démarrage à l'intérieur du package.json

"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite --baseDir ./app --port 8001\" ",
"lite": "lite-server",
 ...
}

ng servir :

Fourni par angular / angular-cli pour démarrer les applications angular2 créées par angular-cli. lorsque vous installez angular-cli, il créera ng.cmd sous C:\Users\name\AppData\Roaming\npm(pour Windows) et exécutera"%~dp0\node.exe" "%~dp0\node_modules\angular-cli\bin\ng" %*

Donc, en utilisant, npm startvous pouvez faire votre propre exécution où ng serveest uniquement pour angular-cli

Voir aussi: Que se passe-t-il lorsque vous exécutez ng serve?

vels4j
la source
Ou ça peut donnernpm ERR! missing script: start
Leo
1

Il y a plus que ça. Les exécutables exécutés sont différents.

npm run start

exécutera l'exécutable local de vos projets qui se trouve dans votre node_modules / .bin.

ng serve

exécutera un autre exécutable global.

Cela signifie que si vous clonez et installez un projet Angular qui est créé avec angular-cli version 5 et que votre version globale de cli est 7, alors vous pouvez avoir des problèmes avec ng build.

yusuf tezel
la source
0

Si vous souhaitez exécuter une application angulaire portée à partir d'une autre machine sans ngcommande, modifiez-la package.jsoncomme suit

"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"
  }

Enfin, exécutez la npm startcommande habituelle pour démarrer le serveur de construction.

SM AMRAN
la source