Question

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

核心问题是ApplicationRef处理程序（在@angularclass/hmr中定义）尝试重新初始化根Class CMySpin : UIFrame { TagGroup CreateDLGTgs( object self ) { TagGroup DLGtgs, DLGItems DLGtgs = DLGCreateDialog( "Test", DLGItems ) TagGroup upButton = DLGCreatePushButton( "U", "OnPushUp" ).DLGExternalPadding(0,-5).DLGInternalPadding(-2,-3) TagGroup downButton = DLGCreatePushButton( "D", "OnPushDown" ).DLGInternalPadding(-2,-3) TagGroup field = DLGCreateIntegerField( 10, 10 ).DLGIdentifier( "field" ) TagGroup SpinGroup = DLGGroupItems( upButton, downButton ).DLGTableLayout(1,2,0) TagGroup fieldWithSpin = DLGGroupItems( field, SpinGroup ).DLGTableLayout(2,1,0) DLGItems.DLGAddElement( fieldWithSpin ) return DLGtgs } void OnPushUp( object self ) { taggroup fieldTG = self.LookupElement( "field" ) number value = fieldTG.DLGGetValue() value++ fieldTG.DLGValue( value ) } void OnPushDown( object self ) { taggroup fieldTG = self.LookupElement( "field" ) number value = fieldTG.DLGGetValue() value-- fieldTG.DLGValue( value ) } void CreateAndPose( object self ) { self.Init( self.CreateDLGTgs() ) self.Pose() } } Alloc(CMySpin).CreateAndPose()上的组件，但在混合应用程序中，Angular上没有组件5根（因为顶级组件是AngularJS 1.x组件）。

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

有什么建议吗？

Answer 1

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

Answer 2

如果您遵循downgradeModule策略，则有可能。 Upgrading for Performance

您基本上可以遵循this guide来启用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) {

  }
});

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

2 个答案: