说明
1、HMR的好处是：开发的时候不需要每次都整体刷新浏览器，只替换被修改过的模块
2、不要把HMR在生产环境里面，因为你不能每次改了代码都去刷所有客户的浏览器
1、安装依赖
npm install @angularclass/hmr --save-dev
2、修改配置文件
// 修改src/environments/environment.ts
export const environment = {
production: false,
hmr: true
};
// 修改src/environments/environment.prod.ts
export const environment = {
production: true,
hmr: false
};
3、添加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 => {
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();
});
};
4、修改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 = () => {
return platformBrowserDynamic().bootstrapModule(AppModule);
};
if (environment.hmr) {
if (module['hot']) {
hmrBootstrap(module, bootstrap);
} else {
// 未加上 --hmr 时，控制台会有错误提醒
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.error(err));
}
5、配置tsconfig.app.json文件
这样基本的配置就都好了，这个时候启动项目你会发现类似如下的错误:
这个时候需要在 src/tsconfig.app.json 文件中加上
"types": ["node"]
6、启动应用
最新的angular版本已经内置了HMR 支持，所以命令只需要加上 --hmr即可，无需像以前版本中配置configurations之类的
ng serve --hmr
好了，项目已经成功启动，这时候你会看到如下警告，他只是一个提示，不要慌
我们只需要在项目根目录的中的server.options下添加
"hmrWarning": false
angular.json
最后我们再来重新启动项目，大功告成！！
