详解Angular6 热加载配置方案

angular6 热加载配置方案，分享给大家，具体如下：

示例 ng 版本如下 ：

$ ng --version

   _           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
 /_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/


angular cli: 6.0.8
node: 8.11.1
os: win32 x64
angular: 6.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

package              version
-----------------------------------------------------------
@angular-devkit/architect     0.6.8
@angular-devkit/build-angular   0.6.8
@angular-devkit/build-optimizer  0.6.8
@angular-devkit/core       0.6.8
@angular-devkit/schematics    0.6.8
@angular/cli           6.0.8
@ngtools/webpack         6.0.8
@schematics/angular        0.6.8
@schematics/update        0.6.8
rxjs               6.2.2
typescript            2.7.2
webpack              4.8.3

安装 hmr 依赖包

npm install --save-dev @angularclass/hmr --registry https://registry.npm.taobao.org

配置 hmr 文件

在 src/environments 目录下添加 environment.hmr.ts 配置文件

文件内容如下 ：

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

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

配置 src/tsconfig.app.json 文件

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

如果不配置上面的 "types":["node"], 则会报错

error in src/main.ts(16,7): error ts2304: cannot find name 'module'.
src/main.ts(17,18): error ts2304: cannot find name 'module'.

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

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

配置 angular.json 文件

...
"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
  }
 }
},

启动应用

• 方式一：ng serve --configuration hmr
• 方式二：ng run ng6:serve:hmr

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。