HMR未使用Angular CLI更新视图

我最近将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();
  });
};

我尝试了以下命令：

ng发球--hmr

ng-service--hmr--configuration-hmr

ng服务——配置hmr

所有内容都会在更改时编译，甚至触发的事件也会缓存在浏览器中，但在HMR记录以下内容后不会发生任何事情：

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

---

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

这是我的设置，目前在最新版本下运行良好。如果你不需要的话，你可以扔掉

ngrx

东西：-）

//main.ts
// ...
导入{
引导加载程序、createInputTransfer、createNewHosts、removeNgStyles
}来自“@angularclass/hmr/dist/helpers”；//为了正确的爬树
if（环境、生产）{
enableProdMode（）；
}
类型HmrModule={
appRef:ApplicationRef，
}
类型HmrNgrxModule=HmrModule&{
存储：{dispatch：（A）=>any}&可观察，
actionCreator:（s:s）=>A
}
常数isNgrxModule=
（实例：HmrModule | HmrNgrxModule）
：实例为M=>
!!（（instance.store&&（instance.actionCreator））；
函数processModule（ngModuleRef:ngModuleRef）{
常数hot=模块['hot']；
如果（热）{
热的[接受]（）；
const instance=ngModuleRef.instance；
const hmrStore=hot['data']；
if（hmrStore）{
hmrStore.rootState
&&isNgrxModule（实例）
&&instance.store.dispatch（instance.actionCreator（hmrStore.rootState））；
hmrStore.restoreInputValues&&hmrStore.restoreInputValues（）；
instance.appRef.tick（）；
Object.keys（hmrStore）.forEach（prop=>delete-hmrStore[prop]）；
}
热['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 dispeldhosts=createNewHosts（cmpLocation）；
hmrStore.restoreInputValues=createInputTransfer（）；
改变风格（）；
ngModuleRef.destroy（）；
disposedhosts（）；
});
}
否则{
console.error（'HMR未为网页包开发服务器启用！'）；
log（'您是否在为ng serve使用--hmr标志？'）；
}
返回ngModuleRef；
}
const bootstrap=（）=>platformBrowserDynamic（）.bootstrapModule（AppModule）；
const hmrBootstrap=（）=>引导加载程序（（）=>bootstrap（）。然后（processModule））；
环境.hmr
? hmrBootstrap（）
：bootstrap（）；

//app.module.ts
// ...
导出类AppModule{
建造师(
公共appRef:ApplicationRef
// , ...
){}
}

//angular.json
“构建”：{
“配置”：{
“hmr”：{
“文件替换”：[
{
“替换”：“src/environments/environment.ts”，
“with”：“src/environments/environment.hmr.ts”
}
]
}
}
},
“发球”：{
“配置”：{
“hmr”：{
“browserTarget”：“AppName:build:hmr”
}
}
}

我使用

ngserve--hmr-c=hmr

---

我希望这有点帮助：-）

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

rm-R package-lock.json节点\u模块
npm缓存清理--强制
npm i

---

希望它能有所帮助。

有点晚了……对我有效的是在我的ClientApp文件夹中我有一个/dist文件夹，里面有所有的js位……如果有dist文件夹，HMR将不起作用。如果你做一个构建，dist就会到达那里。删除dist文件夹，然后运行ng serve。在我的例子中，我有一个托管它的.net核心应用程序，所以我构建了它，并针对我的angular应用程序启动了…通过修改html文件进行测试…应用程序应该在浏览器中重新加载新内容。

我认为这可能对一些人有所帮助。我通过更新到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工作得非常好。我没有时间进一步调试它，但很可能是依赖关系不兼容导致了我的问题

我也遇到了同样的问题。我以前尝试过删除我的node_模块并重新安装，但我认为关键是我们在CLI之前的package.json中仍然存在一些旧的webpack dev依赖项。请在重新安装包之前删除

包锁.json

！啊！事实上，我们从webpack迁移到angular cli，一些开发依赖项仍然保留在package.json中。对我来说，拥有dist文件夹似乎没有什么区别。正如samuel rott所建议的，问题是一些旧的Web包开发依赖项。仍然是与“路由解决”相关的问题，请参见此处：不为我工作。在face中有一行

module.hot.accept（）

在

hmrBootstrap

函数中，它似乎也有相同的功能。它不可能解决您的问题，可能是其他东西解决了。正如@WalterLuszczyk所建议的，此代码行已经存在于hmrBootstrap中。所以，再打一次电话也没什么区别。

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