HMR没有用角CLI更新视图。

Question

我最近更新了我的角应用程序的最新版本。在做了一夜恶梦之后，除了HMR，我什么都能做。我被困得很厉害。以下是我的配置，根据HMR故事关于角CLI维基：

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();
  });
};

main.ts

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

我觉得这可能对一些人有帮助。我通过更新到7并在main.ts中为HMR添加了下面一行来解决我的问题

module['hot'].accept();

详情如下：

if (environment.hmr) {
    if (module['hot']) {
        module['hot'].accept();
        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 {
    console.log('hot');
    bootstrap().catch(err => console.log(err));
}

到目前为止，HMR一直工作得很好。我没有时间对它进行进一步的调试，但是很可能是依赖不兼容导致了它在我的端。

Answer 2

我们面临着同样的问题。通过删除Webpack相关的开发依赖项和执行新的npm安装，解决了这个问题。

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

希望能帮上忙。

Answer 3

有点晚到this...what为我工作是在我的ClientApp文件夹，我有一个/dist文件夹与所有的js bits...HMR不工作，如果有一个dist文件夹。如果你做了一个构建，区域就会到达那里。删除dist文件夹，然后运行ng服务。在我的例子中，我有一个托管它的.net核心应用程序，所以我构建了它，并通过修改html来针对我的角度app...test启动，file...app应该在浏览器中重新加载新的内容。