如何配置带--watch的Angular Universal应用开发构建环境

我之前也踩过这个坑！官方文档确实只重点讲了生产构建的流程，完全没提开发模式下怎么配置watch，不过折腾了一阵后终于搞定了，下面是亲测有效的步骤：

1. 调整package.json的脚本命令 #

先打开你的package.json，在scripts里新增这几个开发相关的命令（保留你原来的prod脚本就行）：

"scripts": {
  // 保留原有prod脚本，新增以下内容
  "dev:client": "ng build --watch --configuration development",
  "dev:server": "ng run my-angular-universal:server:development --watch",
  "dev:universal": "concurrently \"npm run dev:client\" \"npm run dev:server\" \"wait-on dist/my-angular-universal/browser/index.html && nodemon dist/my-angular-universal/server/main.js\""
}

注意把my-angular-universal换成你自己的项目名称（就是你ng new时用的名字）。

脚本说明： #

• dev:client：以开发模式构建客户端代码，同时开启watch监听文件变化，改动后自动重新构建
• dev:server：同样以开发模式构建服务端代码，开启watch
• dev:universal：用concurrently同时跑前两个构建命令，等客户端构建完成（通过wait-on确认静态文件存在）后，用nodemon启动服务端，并且服务端代码变化时自动重启

2. 安装必备的开发依赖 #

要让上面的脚本正常工作，需要装几个工具：

npm install --save-dev concurrently nodemon wait-on

• concurrently：允许在同一个终端里同时运行多个命令，不用开多个窗口
• nodemon：监听服务端编译后的文件，一旦变化就自动重启Node服务
• wait-on：等待客户端构建完成后再启动服务端，避免启动时找不到静态资源报错

3. 确认angular.json的配置正确 #

打开angular.json，找到projects -> my-angular-universal -> architect -> server部分，确保有development配置项，类似这样：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/my-angular-universal/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "outputHashing": "media",
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "sourceMap": false,
      "optimization": true
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "sourceMap": true,
      "extractLicenses": false,
      "vendorChunk": true
    }
  },
  "defaultConfiguration": "production"
}

如果你的配置里没有development这一项，直接把上面的代码加进去就行，路径记得对应你的项目名。

4. 启动开发服务 #

现在执行这个命令就能开启带watch的Universal开发模式了：

npm run dev:universal

执行后你会看到：

• 客户端和服务端同时开始构建，之后进入watch模式
• 代码改动时，对应的部分会自动重新构建
• 服务端代码改动后，nodemon会自动重启服务
• 最后在浏览器访问http://localhost:4000（如果server.ts里改了端口就用对应的端口）就行啦

常见问题排查 #

• 启动时提示找不到dist文件：检查wait-on后面的路径是否和angular.json里客户端的outputPath一致，默认是dist/项目名/browser，别写错了
• 服务端不自动重启：确认nodemon监听的是dist/项目名/server/main.js，这是服务端编译后的入口文件
• 浏览器出现JIT相关错误：如果遇到这个问题，给dev:client命令加上--aot参数，改成ng build --watch --configuration development --aot，强制客户端用AOT编译，和服务端保持一致

这样配置后，开发时就能实时预览改动，不用每次手动重新构建啦！

内容的提问来源于stack exchange，提问作者Mikser