2

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

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

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

有什么建议么？

4

2 回答 2

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) {

  }
});
于 2018-12-05T14:43:45.987 回答
0

我不完全确定它是否对您有任何帮助，但我刚刚在 Medium 上阅读了一篇关于 Angular Hot Module Replacement 的文章。作者提到他的方法不需要注入ApplicationRef：https ://medium.com/@kubal5003/angular-4-hot-module-reload-explained-e832ea616304

于 2018-03-26T09:58:30.833 回答