前言
因为 angular-cli 默认是不会有热更新的效果，所以需要我们自己做一些配置。官方的 Wiki 更新其实没有完全的跟上，所以按照配置可能也不一定能正确实现，所以这里会将成功的配置说明一下。GitHub
版本
本地的版本信息如下：
Angular CLI: 6.0.5
Node: 8.10.0
OS: darwin x64
Angular: 6.0.3
具体配置
一、需要修改的文件
angular.json
package.json
src/environments/environment.prod.ts
src/environments/environment.ts
src/main.ts
二、需要新增的文件
src/environments/environment.hmr.ts
src/hmr.ts
src/typings.d.ts
三、修改的具体内容以及说明
- 利用配置分离的方式来配置 hmr 的参数
// environment.prod.ts
export const environment = {
production: true,
hmr: false // 把热更新在生产模式关闭，当然你也可以不用，最好是统一配置
};
// environment.ts
export const environment = {
production: false,
hmr: false // 跟 prod 意思相同
};
// environment.hmr.ts
export const environment = {
production: false,
hmr: true // 开启热更新，这个配置是给 main.ts 代码使用来判断的参数
};
这里就修改好了参数和不同运行环境下的配置了，接下来要配置在不同的启动方式应用不同的配置文件。
- 映射不同启动环境的配置文件
这部分需要修改 angular.json 文件。
// 1. 修改 JSON 路径：projects/<your_project_name>/architect/build/configurations
// 在这个配置下添加 hmr 属性的配置
// 这里应该看名字很直观，就是在运行的时候把默认配置用 .hmr.ts 文件的内容做替换来启动
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
// 2. 修改 JSON 路径：projects/<your_project_name>/architect/serve/configurations
// 也是添加 hmr 属性的配置
"hmr": {
"browserTarget": "angular-guide:build:hmr"
}
这里你会想，为什么不把 fileReplacements 配置到 serve 属性下，你可以试试，看下报错信息，会报错的哦~
在这里基本我们配置上就已经完成了，剩下是根据 webpack-hot 规则修改热加载的模块。这里使用最粗暴的形式，在应用最顶端进行热加载（这句话如果不能理解不影响最后结果）。
- 映射热更新的代码
(1) 代码上有提供 @angularclass/hmr，所以需要先安装一下：
yarn add @angularclass/hmr --dev
(2) 接下来是模板代码，COPY 即可，就是接受热更新模块，直接替换我们应用中的组件模块。
// src/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();
});
};
(3) 修改 main.ts 的启动代码
const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
console.log(environment); // 打印看环境文件是否加载正确
console.log('is hot: ', module.hot); // 热更新的参数
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();
}
这里你会发现会提示 module 这个变量不存在，所以需要安装一下全局类型定义 @types/webpack-env：
yarn add @types/webpack-env --dev
最后在 src/typings.d.ts 文件中引用类型：
/// <reference types="webpack-env" />
这样就不会提示报错了，因为找到了类型声明文件。
- 添加 npm script
配置其实是完整了，最后启动命令还是简单点：
"hmr": "ng serve --hmr --configuration=hmr"
