web-dev-qa-db-ja.com

Hot Module Replacementが特定のコンポーネントではなくアプリ全体をリロードする

私は新しいangularプロジェクトを作成し、ここで説明されているようにHMRを設定しました： https://github.com/angular/angular-cli/wiki/stories-configure-hmr =

プロジェクトには、router-outletを持つメインコンポーネント（親）が含まれており、遅延読み込みされる3つの子コンポーネントにリンクしています。

注：カスタムRouteReuseStrategyも使用していますが、テストした限りでは、HMRに影響はありません。

変更するファイルに関係なく-.htmlまたは.ts（親/子）アプリ全体がリロードされます。

ここにある基本的なレポを設定しました： https://github.com/ronfogel/demo-hmr

angularhot-module-replacement
16
Ron

この動作は予期されたものです。何が起こっているのかを説明しようと思います。

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();
  });
};
8
Nima Hakimi

これは私が最新の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処理コードは省略できます。

これが少し役立つことを願っています:-)

6
Heehaaw