Angular 8 HMR

Angular 8 HMR

npm install --save-dev @angularclass/hmr

environment.ts

export const environment = {
	production: false,
	hmr: true
};

hmr.ts

import { NgModuleRef, ApplicationRef } from '@angular/core';
import { createNewHosts } from '@angularclass/hmr';

export const hmrBootstrap = (
	module: any,
	bootstrap: () => Promise<NgModuleRef<any>>
) => {
	let ngModule: NgModuleRef<any>;
	module.hot.accept();
	bootstrap().then(mod => {
		if (mod) {
			ngModule = mod;
		}
	});
	module.hot.dispose(() => {
		const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
		const elements = appRef.components.map(c => c.location.nativeElement);
		const makeVisible = createNewHosts(elements);
		ngModule.destroy();
		makeVisible();
	});
};

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { hmrBootstrap } from './hmr';

if (environment.production) {
	enableProdMode();
}

const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

if (environment.hmr) {
	if ((module as any).hot) {
		hmrBootstrap(module, bootstrap);
	} else {
		console.error('HMR is not enabled for webpack-dev-server!');
		console.log('Are you using the --hmr flag for ng serve?');
	}
} else {
	bootstrap().catch(err => console.log(err));
}

package.json

"scripts": {
  "start": "ng serve --hmr",
  ...
}

tsconfig.app.json

{
	"extends": "../tsconfig.json",
	"compilerOptions": {
		"outDir": "../out-tsc/app",
		"types": ["node"]
	},
	"exclude": ["src/test.ts", "**/*.spec.ts"]
}