I was able to make my Angular2 app work with HMR using this code and the only addition I have to made was to call to removeNgStyles in hmr.ts file:
import { NgModuleRef, ApplicationRef } from '@angular/core';
import {createNewHosts, removeNgStyles} from '@angularclass/hmr';
export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {
let ngModule: NgModuleRef<any>;
module.hot.accept();
bootstrap().then(mod => ngModule = mod);
module.hot.dispose(() => {
let appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
let elements = appRef.components.map(c => c.location.nativeElement);
let makeVisible = createNewHosts(elements);
removeNgStyles(); // <== Added this line
ngModule.destroy();
makeVisible();
});
};
I'm not sure but I think this is related to the fact that I have encapsulation set to ViewEncapsulation.None in my app component and that made html texts invisible when hot reloading. Calling removeNgStyles fixes that issue.
Hi,
Thanks for creating this project!
I was able to make my Angular2 app work with HMR using this code and the only addition I have to made was to call to removeNgStyles in hmr.ts file:
I'm not sure but I think this is related to the fact that I have encapsulation set to ViewEncapsulation.None in my app component and that made html texts invisible when hot reloading. Calling removeNgStyles fixes that issue.
Hope it helps!
Thanks!