angular热加载配置

1.配置 hmr 文件

在 src/environments 目录下添加 environment.hmr.ts 配置文件,hmr下的环境变量需要保持和本地开发的环境变量一致。（因为启动项目的时候访问的是hmr，具体参考下面）

文件内容如下 ：

export class environment {
  static production = false;
  static hmr = true;
  static application: Application;
}

interface Application {
  redirect_uri: string;
  authUrl: string;
  authRealm: string;
  authClientId: string;

  moduleFront: string;
  menuManageUrl: string;
  bssFront: string;
  bssApi: string;
  serviceCatalog: string;
}

然后分别在 environment.prod.ts 和 environment.ts 添加static hmr=false 配置项

export class environment {
  static production = false;
  static hmr = false;
  static application: Application;// 这块保持原来的就行
}

2.配置 src/tsconfig.app.json 文件,增加"types": ["node"]

"compilerOptions": {
 ...
 "types": ["node"]
}

3.配置 src/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();
 });
}

4.更新 src/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));
}

5.配置 angular.json 文件

只需要复制下面代码中含有hmr的代码块，其余代码块保持与原代码一致

一部分在： "configurations" 下

另一部分在："serve"=> "configurations" 下 这里的 browserTarget和production中的browserTarget保持一致

   "hmr": {
              "browserTarget": "[项目名称]:build:hmr",
              "hmr": true
            }

...
"build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
  "outputPath": "dist/ng6",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": ["src/favicon.ico", "src/assets"],
  "styles": ["src/styles.css"],
  "scripts": []
 },
 "configurations": {
  "hmr": {
   "fileReplacements": [
    {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.hmr.ts"
    }
   ]
  },
  "production": {
   "fileReplacements": [
    {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.prod.ts"
    }
   ],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": false,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true
  }
 }
},
...
"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
  "browserTarget": "ng6:build"
 },
 "configurations": {
  "production": {
   "browserTarget": "ng6:build:production"
  },
  "hmr": {
   "browserTarget": "ng6:build:hmr",
   "hmr": true
  }
 }
}

6.在package.json 文件下设置启动hmr的方式

  "scripts": {
   ...
    "hmr": "ng serve --port 4205 --configuration hmr" // 注意这里的端口号自行设置，可保持和start中的端口一致
  },

7.安装 hmr

yarn add @angularclass/hmr -D

如果yarn add 失败

就在package.json中 "dependencies"和 "devDependencies"下添加"@angularclass/hmr": "^2.1.3"

然后yarn 安装一遍

8.yarn hmr 启动项目

修改页面内容，保存后浏览器不刷新就更新页面，即为成功。通过控制台也能看出来页面加载是部分更新而不是刷新。