热模块更换正在重新加载整个应用程序而不是特定组件

Posted 2023-03-15

【中文标题】热模块更换正在重新加载整个应用程序而不是特定组件

【英文标题】：Hot Module Replacement is reloading whole app instead specific component

【发布时间】：2019-02-17 22:18:45

【问题描述】：

我创建了一个新的 Angular 项目并设置了 HMR，如下所述： https://github.com/angular/angular-cli/wiki/stories-configure-hmr

该项目包含具有router-outlet 的主组件（父组件）和指向3 个延迟加载的子组件的链接。

注意：我也在使用自定义 RouteReuseStrategy，但就我测试而言，它对 HMR 没有影响。

无论我要更改什么文件 - .html 或 .ts（父/子），整个应用程序都会重新加载。

我已经建立了一个基本的 repo，可以在这里找到： https://github.com/ronfogel/demo-hmr

【问题讨论】：

以目前的编码方式，您将无法获得更多的样式来重新加载并保留一些数据。

我有一个关于热更换模块的通用功能。为了进行热模块更换，服务器端必须支持这种热模块更换？或者它可以全部由客户端处理。我正在开发 Microsoft ERP 系统并使用 Angular。现在每次我进行更改时，我都需要使用 webpack 直接编译和传输文件到 IIS，这需要一些时间，但如果我可以实现 HRM，它将大大加快我的开发速度。

【参考方案1】：

这是我用于最新 Angular 的，工作得很好。你可以试一试...

// main.ts
import  bootloader, createInputTransfer, createNewHosts, removeNgStyles  
    from '@angularclass/hmr/dist/helpers'; // For correct treeshaking

if (environment.production) 
  enableProdMode();


type HmrModule<S> =  appRef: ApplicationRef 
type HmrNgrxModule<S, A> = HmrModule<S> &  
  store:  dispatch: (A) => any  & Observable<S>,
  actionCreator: (s: S) => A


const isNgrxModule = <S, A, M extends HmrNgrxModule<S, A>>
  (instance: HmrModule<S> | HmrNgrxModule<S, A>): instance is M =>
    !!((<M>instance).store && (<M>instance).actionCreator);

function processModule<S, A, M extends HmrModule<S> | HmrNgrxModule<S, A>>(ngModuleRef: NgModuleRef<M>) 

  const hot = module['hot'];
  if (hot) 

    hot['accept']();

    const instance = ngModuleRef.instance;
    const hmrStore = hot['data'];

    if (hmrStore) 
      hmrStore.rootState 
        && isNgrxModule(instance) 
        && instance.store.dispatch(instance.actionCreator(hmrStore.rootState));
      hmrStore.restoreInputValues && hmrStore.restoreInputValues();
      instance.appRef.tick();
      Object.keys(hmrStore).forEach(prop => delete hmrStore[prop]);
    

    hot['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 disposeOldHosts = createNewHosts(cmpLocation);
      hmrStore.restoreInputValues = createInputTransfer();
      removeNgStyles();
      ngModuleRef.destroy();
      disposeOldHosts();
    );
  
  else 
    console.error('HMR is not enabled for webpack-dev-server!');
    console.log('Are you using the --hmr flag for ng serve?');
  

  return ngModuleRef;


const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
const hmrBootstrap = () => bootloader(() => bootstrap().then(processModule));

environment.hmr
  ? hmrBootstrap()
  : bootstrap();

// app.module.ts
@NgModule( ... )
export class AppModule 
  constructor(public appRef: ApplicationRef)  ... 

HMR 设置也适用于 Ngrx 存储，如果您喜欢这类东西的话。不过，您可以省略 Ngrx 处理代码。

希望这会有所帮助:-)

【讨论】：

不适合我，如果你能提供一个工作演示，那就太好了！

【参考方案2】：

这种行为是意料之中的，我将尝试解释发生了什么。

Angular 设置的热模块替换实际上只是以更通用的方式重新引导整个应用程序并支持多个应用程序根，但是如果您将抽象放在一边，它只需删除 app-root 标记，添加它再次引导 AppModule ，因此整个应用程序发生变化：

export const hmrBootstrap = (
  // webpack stuff
  module: any,
  // bootstrap is AppModule bootstrapper 
  bootstrap: () => Promise<NgModuleRef<any>>
) => 
  let ngModule: NgModuleRef<any>;
  module.hot.accept();
  // bootstraps AppModule ecery time a HMR is needed
  // sets ngModule equal to AppModule if successful (unnecessary)
  bootstrap().then(mod => (ngModule = mod));
  module.hot.dispose(() => 
    // next two lines get native element for all `app-root` tags
    // that exist in `index.html`
    const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
    const elements = appRef.components.map(c => c.location.nativeElement);
    // I will share createNewHosts code below it's nothing fancy just
    // the simple add and delete i mentioned
    const makeVisible = createNewHosts(elements);
    //destroy the current AppModule and finalize deletion
    ngModule.destroy();
    makeVisible();
  );
;