Angular6 项目增加HMR热更新功能 浏览器无刷更新

安装依赖

npm install --save-dev @angularclass/hmr

项目src下environments目录内，environments.ts和environment.prod.ts文件增加hmr: false

export const environment = {
  hmr: false
};

项目src下environments目录内，新增environment.hmr.ts文件，增加hmr: false

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

angular.json文件，build配置下的configurations中增加

"hmr": {
	"fileReplacements": [
		{
		      "replace": "src/environments/environment.ts",
		      "with": "src/environments/environment.hmr.ts"
		}
	]
}

angular.json文件，serve的configurations中增加

"hmr": {
	"hmr": true,
	 "browserTarget": "my-app:build:hmr"
}

tsconfig.app.json文件的compilerOptions的types中添加

"types": ["node"]

package.json的scripts命令中添加 （自定义命令，开心就好）

"hmr": "ng serve --configuration hmr --open"

src目录下创建hmr.ts文件

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

export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {
	let ngModule: NgModuleRef;
	module.hot.accept();
	bootstrap().then(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['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));
}

执行自定义的scripts命令

npm run hmr

结束