Angular 13 热更新无效

Question

建了一个Angular 13的项目
用了ng-zorror组件库

启用了热更新(hmr)支持
但是更改任何html文件 css文件 ts文件
angular-cli都不会重新编译
前端展示无变化
确认热更新不生效
但奇怪的angular-cli控制台能看到是启动了热更新的

每次重启serve后修改会生效

求解决热更新无效问题

开发环境
node v16.13.2
npm 8.3.0
yarn 1.22

配置
enviroment.js

export const environment = {
  production: false,
  hmr:true
};

angular.json

       "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "chengzheng-official:build:production"
            },
            "development": {
              "hmr": true,
              "browserTarget": "chengzheng-official:build:development"
            }
          },
          "defaultConfiguration": "development"
        }

package.json

  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "ng-zorro-antd": "^13.2.2",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.5",
    "@angular-eslint/builder": "13.2.1",
    "@angular-eslint/eslint-plugin": "13.2.1",
    "@angular-eslint/eslint-plugin-template": "13.2.1",
    "@angular-eslint/schematics": "13.2.1",
    "@angular-eslint/template-parser": "13.2.1",
    "@angular/cli": "~13.3.5",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.17.0",
    "@typescript-eslint/parser": "5.17.0",
    "eslint": "^8.12.0",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2"
  }

webstrom控制台输出

C:\Windows\system32\wsl.exe --distribution Ubuntu --exec /bin/sh -c "cd /mnt/d/Dev/JS/*******-official && /usr/bin/node /usr/lib/node_modules/npm/bin/npm-cli.js run ng --scripts-prepend-node-path=auto serve --hmr"
Debugger listening on ws://127.0.0.1:34273/73f2690a-63de-4b53-ba52-f5fbda1d2248
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.

> ********-official@0.0.0 ng
> ng "serve"

Debugger listening on ws://127.0.0.1:41599/63534352-b01b-457a-8f64-ffdacc9e1aa6
For help, see: https://nodejs.org/en/docs/inspector
Debugger attached.
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
See https://webpack.js.org/guides/hot-module-replacement for information on working with HMR for Webpack.
✔ Browser application bundle generation complete.

Initial Chunk Files   | Names         |  Raw Size
vendor.js             | vendor        |   4.39 MB |
styles.css, styles.js | styles        |   1.20 MB |
polyfills.js          | polyfills     | 298.25 kB |
runtime.js            | runtime       |  47.69 kB |
main.js               | main          |  33.10 kB |

                      | Initial Total |   5.97 MB

Build at: xxxxxx - Hash: xxxxxxx - Time: 10498ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.

浏览器控制台输出

Answer 1

破案了
原因用的wsl里面的node 但是主程序没放在wsl里面
目前windows底层还不支持跨内核的事件推送
所以热更新没生效

想要用wsl上的node
必须把开发的程序放到wsl的存储目录里
stackoverflow上有解答
参考

Answer 2

ng serve --hmr试一下。

https://angular.io/cli/serve