¿Cuándo usar 'npm start' y cuándo usar 'ng serve'?

157

ng serve sirve un proyecto angular a través de un servidor de desarrollo

 

npm startejecuta un comando arbitrario especificado en la propiedad "start" del paquete de su objeto "scripts". Si no se especifica ninguna propiedad "inicio" en el objeto "scripts", ejecutará el nodo server.js.

Parece que ng serveinicia el servidor incorporado mientras que npm startinicia los servidores Node.

¿Alguien puede arrojar algo de luz sobre él?

angular angular-cli ishandutta2007
fuente
1
¿Has visto lo que ese startcomando en el scriptsobjeto en tu package.jsonhace? ¿Por qué crees que hay alguna diferencia?
jonrsharpe

Respuestas:

205

npm startejecutará lo que haya definido para el startcomando del scriptsobjeto en su package.jsonarchivo.

Entonces, si se ve así:

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

Entonces npm startcorrerá ng serve.

Puigcerber
fuente
Además, según la cita que ya tenía el OP: si no se especifica ninguna propiedad "inicio" en el objeto "scripts", se ejecutará node server.js(lo que fallará si ese archivo no está allí).
jonrsharpe
1
Sí, pero angular-cli crea el comando de inicio en la inicialización, por lo que si no lo ha modificado, debería ser el mismo comando.
Puigcerber
77
Nota: Usar npm startes mejor. Para usarlo ng serve, necesita instalar cli angular globalmente o hacer referencia desde el bin de módulos de nodo.
Kyle Pfromer
43

Para un proyecto que usa la CLI, generalmente usará ng serve. En otros casos, es posible que desee utilizar npm start. Aquí la explicación detallada:

ng servir

Servirá a un proyecto que es "consciente de la CLI angular", es decir, un proyecto que se ha creado utilizando la CLI angular, en particular utilizando:

ng new app-name

Entonces, si ha andamiado un proyecto usando la CLI, probablemente querrá usar ng serve

npm start

Esto se puede usar en el caso de un proyecto que no sea compatible con Angular CLI (o simplemente se puede utilizar para ejecutar 'ng serve' para un proyecto que sea compatible con Angular CLI)

Como dicen las otras respuestas, este es un comando npm que ejecutará los comandos npm desde package.json que tienen el identificador 'start', y no solo tiene que ejecutar 'ng serve'. Es posible tener algo como lo siguiente en el paquete.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",

En este caso, 'npm start' dará como resultado la ejecución de los siguientes comandos:

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

Esto ejecutará simultáneamente el compilador TypeScript (observando los cambios de código) y el servidor Node lite (que los usuarios BrowserSync)

Chris Halcrow
fuente
1
Creo que la única razón por la que recibió votos negativos podría deberse a que repitió más o menos lo que se dijo en la respuesta marcada.
Kostrzak
1
Preferiría que comience con una declaración de una oración que me diga cuándo usar una u otra y luego siga con lo que ha proporcionado. Comenzaría con ... En un proyecto pequeño, pueden ser lo mismo, npm start simplemente puede ejecutar ng serve. Cuando un proyecto crece o se necesitan más pasos, npm start es npm standard para iniciar / ejecutar aplicaciones. Casi proporcioné una respuesta y luego, después de leer lo que proporcionó, me di cuenta de que no era necesario. Tu respuesta fue muy buena.
PatS
13

Del documento

npm-start :

Esto ejecuta un comando arbitrario especificado en la propiedad "start" del paquete de su objeto "scripts". Si no se especifica ninguna propiedad "inicio" en el objeto "scripts", ejecutará el nodo server.js.

lo que significa que llamará a los scripts de inicio dentro del paquete.json

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

ng servir :

Proporcionado por angular / angular-cli para iniciar aplicaciones angular2 creadas por angular-cli. cuando instala angular-cli, creará ng.cmd debajo C:\Users\name\AppData\Roaming\npm(para Windows) y ejecutará"%~dp0\node.exe" "%~dp0\node_modules\angular-cli\bin\ng" %*

Entonces, usando npm startusted puede hacer su propia ejecución donde ng servees solo para angular-cli

Consulte también: ¿Qué sucede cuando ejecuta ng serve?

vels4j
fuente
O puede darnpm ERR! missing script: start
Leo
1

Hay más que eso. Los ejecutables ejecutados son diferentes.

npm run start

ejecutará el ejecutable local de su proyecto que se encuentra en su node_modules / .bin.

ng serve

ejecutará otro ejecutable que sea global.

Significa que si clonas e instalas un proyecto Angular que se crea con angular-cli versión 5 y tu versión global de cli es 7, entonces puedes tener problemas con ng build.

yusuf tezel
fuente
0

Si desea ejecutar una aplicación angular portada desde otra máquina sin ngcomando, edite de la package.jsonsiguiente manera

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

Finalmente ejecute el npm startcomando habitual para iniciar el servidor de compilación.

SM AMRAN
fuente