热模块替换（HMR）是一种WebPack功能，用于更新正在运行的应用程序中的代码而无需重建它。这样可以加快更新速度并减少整页重新加载。

为了让HMR使用Angular CLI，我们首先需要添加一个新环境并启用它。

1.HMR添加依赖项并配置app
  • 安装hmr依赖环境
1
$ npm install --save-dev @ angularclass / hmr
  • 创建一个src/hmr.ts使用以下内容作为配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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();
  });
};
  • 修改main.ts文件的配置为以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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));
}
2.配置HMR环境变量

创建一个src/environments/environment.hmr.ts使用以下内容调用的文件：

1
2
3
4
export const environment = {
 production: false,
 hmr: true
};

更新src/environments/environment.prod.ts并将hmr: false标志添加到环境中：

1
2
3
4
export const environment = {
 production: true,
 hmr: false
};

更新src/environments/environment.ts并将hmr: false标志添加到环境中：

1
2
3
4
export const environment = {
 production: false,
 hmr: false
};

接下来,配置angular.json,此处 <project-name> 为你的项目名称;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{
 ...
 "projects":{
   ...
   "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"
        }
      }
    }
  }
}

修改src/tsconfig.app.json

1
2
3
4
5
6
7
{
  ...
  "compilerOptions": {
    ...
    "types": ["node"]
  },
}

我们可以在pack.json中做以下配置方便我们在实际开发中更好的工作,这里使用4205端口,是方便我们启动多个项目时,防止端口重复,可以根据自己的需要具体修改配置,以下仅供参考;

1
2
3
4
"scripts": {
  ...
  "hmr": "ng serve --configuration hmr  --open  --port 4205"
},
1
$ npm run hmr