Angular 6 HMR 熱加載配置

什麼是 HMR？

​ HMR 是hot module replacement 的簡稱，直譯：熱模塊替換，若是不開啓HMR模式，angular項目在模塊更改的時候會從根節點開始刷新，開啓HMR模式之後，只會刷新有修改的地方，開發效率在某種意義上能夠提升

配置步驟

配置前提：你已經建立了一個angular6項目，安裝hmr依賴

npm install --save-dev @angularclass/hmr

1）在 src/environments 目錄下添加 environment.hmr.ts 配置文件，文件內容爲:

export const environment = {
production: false,
hmr: true
};

2）而後分別在 environment.prod.ts 和 environment.ts 添加 hmr:false 配置項

3）配置 src/tsconfig.app.json 文件 ，內容爲：

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

4）配置 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();
});
};

5）更新 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));
}

6）配置 angular.json 文件 ：

"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/${project-name}",
"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": "${project-name}:build"
},
"configurations": {
"production": {
"browserTarget": "${project-name}:build:production"
},



"hmr": {
"browserTarget": "${project-name}:build:hmr",
"hmr": true
}



}
},

7）啓動方式:兩種

第一種：

ng serve --configuration hmr

第二種:

ng run ${project-name}:serve:hmr

8)爲方便通常添加在package.json的scripts裏:

"scripts": {
...
"hmr": "ng serve --configuration hmr --open" 
}