Angular 5/1.x 混合应用程序可以支持 HMR 吗?

Question

使用 Angular 5 应用程序

配置 HMR 的文档方法不适用于混合 Angular 5/1.x 应用程序。

核心问题是module.hot.accept处理程序(在 @angularclass/hmr 中定义(尝试重新初始化根ApplicationRef上的组件，但在混合应用程序中，Angular 5 根上没有组件(因为顶级组件是 AngularJS 1.x 组件(。

如果有一种方法可以在应用程序中枚举 Angular 5 组件，似乎重新加载逻辑可能会起作用，但我看不到任何方法可以做到这一点。

有什么建议吗？

Answer 1

如果您遵循downgradeModule策略，这是可能的。升级以提高性能

您基本上可以按照本指南启用 HMR，除了创建hmr.ts和main.ts的操作，因为您不会downgradeModule策略中使用它。

在 AngularJs 主模块中激活 hmr 的更多内容如下：

// import all libs you need to boot
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {downgradeModule} from '@angular/upgrade/static';
import {MyAngularSevenModule} from "./my-angular-seven.module";
import {environment} from './environments/environment';
import {enableProdMode} from '@angular/core';
// important!: rename angular.module to not conflict with global `module`
import {module as angularModule, element, bootstrap} from 'angular';
// check if in prod mode
if(environment.production) {
  enableProdMode();
}
// bootstrap you new Angular 7 main module
const bootstrapFn = (extraProviders) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(MyAngularSevenModule);
};
const downgradedModule = downgradeModule(bootstrapFn);
// check if hmr should be enables and accept it if possible
if(environment.hmr) {
  if(module && module.hot) {
    module.hot.accept();
  }
}
// construct your AngularJs module
const ngModule = angularModule("app", []);
// important!: manually bootstrap AngularJs
element(() => {
  try {
    bootstrap(document, ['app']);
  } catch(error) {
  }
});

Answer 2

我不

完全确定它是否对您有任何帮助，但我刚刚阅读了一篇关于 Medium 的文章 角度热模块更换.作者提到他的方法不需要注射ApplicationRef：https://medium.com/@kubal5003/angular-4-hot-module-reload-explained-e832ea616304