Angular6 配置 hmr (热加载)

前置条件

• 先安装项目依赖包 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】