前置条件
- 先安装项目依赖包
yarn( 推荐使用 yarn 包管理工具 ) - 安装
hmr依赖包yarn add @angularclass/hmr --dev
1. 添加
environment.hmr.ts配置文件
在 src/app/environments 目录下添加 environment.hmr.ts，内容如下：
export const environment = {
production: false,
hmr: true
};
同时，修改 environment.prod.ts 和 environment.ts 文件为如下内容：
export const environment = {
production: false,
hmr: false
};
2. 添加
hmr.ts文件
在 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文件内容
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));
}
4. 配置
angular.json文件
修改根目录下的 angular.json 文件
"build": {
"configurations": {
...
"hmr": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.hmr.ts"
}
]
}
}
},
...
"serve": {
"configurations": {
...
"hmr": {
"hmr": true,
"browserTarget": "<project-name>:build:hmr"
}
}
}
5. 配置
tsconfig.json文件
这个选项对高版本的 typescript 才有用
"types": ["node"]
旧版本的 typescript 使用ts的声明文件，如：hot.d.ts
declare interface NodeModule {
hot: any;
}
declare var module: NodeModule;
如果以上两个都没配置，启动应用编译的时候会报错：
ERROR in src/main.ts(16,7): error TS2304: Cannot find name 'module'.
src/main.ts(17,18): error TS2304: Cannot find name 'module'.
6. 启动应用
方式一：
ng serve --configuration hmr
方式二：
ng run ng6:serve:hmr
方式三：
"scripts": {
...
"hmr": "ng serve --configuration hmr"
}
npm run hmr
有的时候启动应用编译的时候会卡在如下位置：
95%emitting LicenseWebpackPlugin
解决方案：
- 使用
yarn重新安装依赖包
如果使用 yarn 安装依赖包出现如下信息
info There appears to be trouble with your network connection. Retrying...
解决方案：
- 需配置
registry - 操作
yarn config set registry https://registry.npm.taobao.org/，之后再次执行yarn安装依赖包
天之骄子 2018.8.24 星期五 深圳
Angular 修仙QQ群号【648681235】
