HMR 未使用 Angular CLI 更新视图

Question

我最近将我的 angular 应用程序更新到了最新版本。经过一夜的错误噩梦，除了 HMR 之外，我让一切正常。我被它深深地困住了。以下是我根据 Angular CLI wiki 上的 HMR 故事进行的配置：

angular.json

      "build": {
              "configurations": {
                "hmr": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.hmr.ts"
                    }
                  ]
                }
              }
            },
 "serve": {
          "configurations": {
            "hmr": {
              "hmr": true,
              "browserTarget": "appHit:build:hmr"
            },
          }
        },

hmr.js

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  bootstrap().then(mod => ngModule = mod);
  module.hot.dispose(() => {
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    const makeVisible = createNewHosts(elements);
    ngModule.destroy();
    makeVisible();
  });
};

主文件

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if (environment.production) {
  enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
  if (module[ 'hot' ]) {
    hmrBootstrap(module, bootstrap);
  } else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }
} else {
    bootstrap().catch(err => console.log(err));
}

我尝试了以下命令：

ng serve --hmr

ng serve --hmr --configuration hmr

ng serve --configuration hmr

一切都在更改时编译，甚至触发的事件也缓存在浏览器中，但在 HMR 记录以下内容后没有任何反应：

[WDS] App updated. Recompiling...
[WDS] App hot update...

我完全迷失在这一点上。任何形式的帮助将不胜感激。谢谢

Answer 1

我们遇到了同样的问题。它通过删除与 Webpack 相关的开发依赖项并执行全新的 npm 安装来解决。

rm -R package-lock.json node_modules npm cache clean --force npm i

希望它能有所帮助。