何时使用'npm start'以及何时使用'ng serve'？

Question

ng serve 通过开发服务器提供Angular项目

 

npm start运行在其"scripts"对象的包的"start"属性中指定的任意命令.如果在"scripts"对象上未指定"start"属性,则它将运行节点server.js.

它似乎ng serve启动了嵌入式服务器,而npm start启动了Node服务器.

有人可以对它有所启发吗？

Answer 1

npm start将运行您为文件中对象start命令定义的任何内容.scriptspackage.json

所以,如果它看起来像这样:

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

然后npm start就会跑ng serve.

Answer 2

对于使用CLI的项目,通常使用ng serve.在其他情况下,您可能想要使用npm start.这里详细说明:

服务

将服务一个项目,是 "角CLI意识",即已经使用角CLI,特别是使用创建的项目:

ng new app-name

所以,如果你使用CLI搭建项目,你可能想要使用ng服务

npm开始

这可以用于不支持 Angular CLI 的项目(或者它可以简单地用于为Angular CLI识别的项目运行'ng serve')

正如其他答案所述,这是一个npm命令,它将运行package.json中具有标识符'start'的npm命令,并且它不仅需要运行'ng serve'.可以在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",

在这种情况下,'npm start'将导致运行以下命令:

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

这将同时运行TypeScript编译器(观察代码更改),并运行Node lite-server(用户BrowserSync)

Answer 3

从文件

npm-start:

这将运行在其"scripts"对象的包的"start"属性中指定的任意命令.如果在"scripts"对象上未指定"start"属性,则它将运行节点server.js.

这意味着它将调用package.json中的启动脚本

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

服务:

由angular/angular-cli提供,以启动由angular-cli创建的angular2应用程序.当你安装angular-cli时,它会在C:\Users\name\AppData\Roaming\npm(对于windows)下创建ng.cmd 并执行"%~dp0\node.exe" "%~dp0\node_modules\angular-cli\bin\ng" %*

所以使用npm start你可以让你自己的执行ng serve只适用于angular-cli

另请参阅:运行服务时会发生什么？

Answer 4

还有更多。执行的可执行文件不同。

npm run start

将运行位于 node_modules/.bin 中的项目本地可执行文件。

ng serve

将运行另一个全局可执行文件。

这意味着如果您克隆并安装使用 angular-cli 版本 5 创建的 Angular 项目，并且您的全局 cli 版本是 7，那么您可能会遇到 ng build 问题。

Answer 5

最好的答案很好，简短而切题，但我想投入我的一分钱。

基本上，只要您不希望命令执行其他操作，npm start和ngserve就可以在 Angular 项目中互换使用。让我详细说明一下这一点。

例如，您可能想在 package.json 启动脚本中配置代理，如下所示："start": "ng serve --proxy-config proxy.config.json",

显然，单独使用 ngserve 是不够的。

另一个例子是，您需要临时使用一些附加选项，例如定义临时端口，而不是使用默认值：ng serve --port 4444

有些参数仅适用于 ngserve，其他参数适用于 npm start。请注意，端口选项对两者都适用，因此在这种情况下，再次取决于您的喜好。:)