Template text is not visible after hot reloading, should add removeNgStyles

[nicogarcia]

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:

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.

Hope it helps!

Thanks!

[nicogarcia]

FTR: I removed the encapsulation attribute and removeNgStyles was not necessary for HMR to work.