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

Question

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

该项目包含具有router-outlet的主要组件(父组件(，并链接到 3 个延迟加载的子组件。

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

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

我已经设置了一个基本的存储库，可以在这里找到： https://github.com/ronfogel/demo-hmr

Answer 1

这种行为是意料之中的，我将尝试解释正在发生的事情。

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

Answer 2

这是我用于最新 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 处理代码。

希望这有所帮助：-(