配置 angular cli build watch 模式和 nodemon watch 的最佳方法是啥？

Posted 2023-02-23

【中文标题】配置 angular cli build watch 模式和 nodemon watch 的最佳方法是啥？

【英文标题】：What is the best way to configure angular cli build watch mode and nodemon watch?配置 angular cli build watch 模式和 nodemon watch 的最佳方法是什么？

【发布时间】：2017-10-25 16:43:49

【问题描述】：

您好，我正在使用 Angular 4 开发一个平均应用程序。我使用了 Angular cli 配置。我想使用监视模式自动构建代码，并且还想在任何文件更改时重新启动节点服务器。

我使用了以下命令，但没有工作

script: 
   "server": "ng build -w && nodemon --watch src/**/*.ts --exec ts-node ./bin/www"

我将配置保存在目录bin/www 文件中，该文件正在从其他地方导入server.ts。

上述命令的问题是，ng cli 正在构建代码并启用 watch 但 nodemon 没有启动。

所以我尝试了以下方法。但它的构建只有一次，因为没有为 cli 启用 watch。

script: 
   "server": "ng build && nodemon --watch src/**/*.ts --exec ts-node ./bin/www"

nodemon watch 在这两种情况下都不起作用。

【问题讨论】：

为什么不直接使用 ng serve 呢？如果您愿意，它可以充当节点服务器的代理。

是的，但我认为这将在两个不同的端口上运行。我想为 ui 和 api 使用 express 服务器。我可以在一个命令上同时运行吗？如果我错了，请帮助我。

ng serve 可以充当节点服务器的代理。因此它直接提供 Angular 资源，并将 API 请求代理到您的节点服务器。 github.com/angular/angular-cli/blob/master/docs/documentation/…

非常感谢亲爱的。我认为这对我有用。我会试试这个，让你知道。感谢您的支持。 :)

@JBNizet 根据您的解决方案，它可以正常工作，但我需要单独启动 nodemon。我使用concurrently 同时运行 angular build 和 nodemon，如下所示。 ``` "nodemon": "nodemon --watch src --exec ts-node ./bin/www", "server": "concurrently --kill-others \"npm run start\" \"npm run nodemon\ "" ``` 这里的问题是 nodemon 没有重新启动。我认为它看错了路。看到以下日志``` [nodemon] 1.11.0 [nodemon] 随时重启，输入rs [nodemon] 看：D:\Projects\mean-app\src/**/* [nodemon] 启动ts-node ./bin/www```

【参考方案1】：

根据上面的 cmets，这就是我如何让 2 个服务器工作并响应任何更改。

使用 angular-cli 工具创建 Angular 2 应用程序，前端服务器 在这个应用的根目录下创建server.js文件，后端服务器，Express应用的例子是here 安装包

npm-run-all

以同时启动 2 个服务器 在应用的根目录中创建文件 server.conf.json，内容如下

  "/api": 
    "target": "http://localhost:3000",
    "secure": false
  

修改 package.json 以包含此部分

"scripts": 
  "client": "ng serve --proxy-config server.conf.json",
  "server": "nodemon server.js",
  "start": "npm-run-all -p client server"

运行“npm start”

现在 ng serve 正在观察 Angular 和 nodemon - 在 Node 中的任何变化。

localhost:4200                  // ng serve => angular
localhost:4200/page             // ng serve => angular
localhost:4200/another/page     // ng serve => angular
localhost:4200/api              // ng serve => node
localhost:4200/api/users        // ng serve => node
localhost:3000/api              // node
localhost:3000/api/users        // node

【讨论】：

是的！谢谢。我真的很想继续使用 ng serve 和另一个服务器解决方案。也 - 清楚的解释

【参考方案2】：

package.json

"scripts": 
    "start": "concurrently --kill-others \"npm run server:run\" \"npm run server\" \"ng serve --aot --progress=false --proxy-config proxy.conf.json\"",
    "lint:client": "ng lint",
    "lint:server": "tslint './server/**/*.ts' -c ./server/tslint.json --fix",
    "test:client": "ng test --watch false",
    "e2e:client": "ng e2e",
    "build": "ng build --prod --sm=false --aot --output-path=dist && npm run server:build",
    "server:run": "nodemon",
    "server": "node server.js",
    "server:build": "tsc -p ./server",
    "postinstall": "npm run build",
    "build:prod":"ng build --prod --sm=false --aot --output-path=dist"
  

proxy.conf.json

 
      "/api/*":  // need to change api with your specific name appropriate to your http 
        "target": "http://localhost:3000",
        "secure": false
      
    

然后执行 npm start 或 npm run start

【讨论】：

工作，但我正在运行 npm run server:run 因为 npm run server 会导致错误提示端口已在使用中。