HMR没有在Angular CLI中更新视图

Question

我最近将我的Angular应用程序更新到了最新版本。经过一夜的噩梦般的错误，我成功解决了所有问题，除了热模块替换（HMR）。我现在非常困扰。以下是根据Angular CLI wiki上的HMR Story配置的内容：

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...

我现在完全迷失了方向。非常感谢任何帮助。谢谢。

- Metabolic

---

仍然存在与“route-resolve”相关的问题，请参见此处：https://stackoverflow.com/questions/55355133/angular-7-hot-module-replacement-does-not-work-if-any-route-resolve-involved - user3025289

Answer 1

我们遇到了相同的问题。解决方法是移除与Webpack相关的开发依赖项，然后重新执行npm安装。

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

希望这可以帮到你。

- Iorek

---

我曾经遇到过同样的问题。之前我尝试过删除我的node_modules并重新安装，但我认为关键是我们在package.json中仍然有一些旧的webpack dev依赖项，这些依赖项来自于CLI之前的时期。 - wags1999

在重新安装包之前，请删除 package-lock.json 文件！哎呀！ - The Head Rush

我们确实从webpack迁移到了angular cli，但是一些开发依赖仍然留在了package.json中。 - stephan.peters

Answer 2

在我的ClientApp文件夹中，有一个/dist文件夹包含所有的js部分...如果有dist文件夹，则HMR无法工作。如果进行构建，则会出现dist文件夹。删除dist文件夹，然后运行ng serve。在我的情况下，我有一个.net core应用程序托管它，所以我构建了它，并针对我的angular应用程序启动了它...通过修改html文件进行测试...应用程序应该在浏览器中重新加载新内容。

- swandog

---

对我来说，拥有dist文件夹似乎没有什么区别。问题在于一些旧的webpack开发依赖项，正如Samuel Rott所建议的那样。 - wags1999

Answer 3

我认为这可能对一些人有帮助。我通过更新到Angular 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 工作得非常好。我还没有时间进一步调试它，但最有可能是由于依赖项不兼容造成了这个问题。

- Metabolic

---

对我没有用。实际上，在hmrBootstrap函数中有一行module.hot.accept();，它似乎做了同样的事情。 - Walter Luszczyk

它可能没有解决你的问题，也许是其他原因。正如@WalterLuszczyk所建议的那样，这行代码已经存在于hmrBootstrap中。因此，再次调用它不会有任何区别。 - Pankaj

Answer 4

这是我的设置，目前在最新版本下工作得很好。如果你不需要 ngrx 的东西，可以将其删除 :-)

// main.ts

// ...
import { 
  bootloader, createInputTransfer, createNewHosts, removeNgStyles 
} from '@angularclass/hmr/dist/helpers'; // For correct treeshaking    

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

type HmrModule<S> = {
  appRef: ApplicationRef,
}
type HmrNgrxModule<S, A> = HmrModule<S> & {
  store: { dispatch: (A) => any } & Observable<S>,
  actionCreator: (s: S) => A
}

const isNgrxModule = 
  <S, A, M extends HmrNgrxModule<S, A>>(instance: HmrModule<S> | HmrNgrxModule<S, A>)
  : instance is M =>
    !!((<M>instance).store && (<M>instance).actionCreator);

function processModule<S, A, M extends HmrModule<S> | HmrNgrxModule<S, A>>(ngModuleRef: NgModuleRef<M>) {

  const hot = module['hot'];
  if (hot) {

    hot['accept']();

    const instance = ngModuleRef.instance;
    const hmrStore = hot['data'];

    if (hmrStore) {
      hmrStore.rootState 
        && isNgrxModule(instance) 
        && instance.store.dispatch(instance.actionCreator(hmrStore.rootState));
      hmrStore.restoreInputValues && hmrStore.restoreInputValues();
      instance.appRef.tick();
      Object.keys(hmrStore).forEach(prop => delete hmrStore[prop]);
    }

    hot['dispose'](hmrStore => {
      isNgrxModule(instance) && instance.store.pipe(take(1)).subscribe(s => hmrStore.rootState = s);
      const cmpLocation = instance.appRef.components.map(cmp => cmp.location.nativeElement);
      const disposeOldHosts = createNewHosts(cmpLocation);
      hmrStore.restoreInputValues = createInputTransfer();
      removeNgStyles();
      ngModuleRef.destroy();
      disposeOldHosts();
    });
  }
  else {
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  }

  return ngModuleRef;
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
const hmrBootstrap = () => bootloader(() => bootstrap().then(processModule));

environment.hmr
  ? hmrBootstrap()
  : bootstrap();

// app.module.ts

// ...
export class AppModule {
  constructor(
    public appRef: ApplicationRef 
    // , ...
  ){}
}

// angular.json

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

我使用 ng serve --hmr -c=hmr 运行它。

希望这能有所帮助 :-)

- Heehaaw