详解Angular6 热加载配置方案

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

示例 ng 版本如下 ：

rush:plain;"> $ 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 依赖包

rush:bash;"> npm install --save-dev @angularclass/hmr --registry https://registry.npm.taobao.org

配置 hmr 文件

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

文件内容如下 ：

rush:js;"> export const environment = { production: false,hmr: true };

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

配置 src/tsconfig.app.json 文件

rush:js;"> "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 文件内容如下

export const hmrBootstrap = (
module: any,bootstrap: () => Promise<NgModuleRef>
) => {
let ngModule: NgModuleRef;
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 { 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 文件

rush:js;"> ... "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

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