Can an Angular 5/1.x hybrid app support HMR?

问题

The documented approach to configuring HMR with an Angular 5 application does not work with hybrid Angular 5/1.x apps.

The core issue is that the module.hot.accept handler (defined in @angularclass/hmr) attempts to reinitialize the components on the root ApplicationRef, but in a hybrid app there are no components on the Angular 5 root (since the top level component is an AngularJS 1.x component).

It seems like the reload logic might work if there were a way to enumerate the Angular 5 components in the app, but I don't see any way to do that.

Any suggestions?

回答1:

I’m not entirely sure if it’s of any help for you but I just read an article on Medium about Angular Hot Module Replacement. The author mentions that his method does not require the injection of ApplicationRef: https://medium.com/@kubal5003/angular-4-hot-module-reload-explained-e832ea616304

回答2:

If you follow the downgradeModule strategy, it is possible. Upgrading for Performance

You can basically follow this guide to enable HMR, except creating hmr.ts and the manipulation of the main.ts, as you do not use it in downgradeModule strategy.

Much more you activate hmr in the AngularJs main module like this:

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

  }
});

来源：https://stackoverflow.com/questions/49077919/can-an-angular-5-1-x-hybrid-app-support-hmr