angular快速开发之热加载配置
文章 1980 0 0 0
发布时间:2019年10月11日

概述

安装 hmr 依赖包

npm install —save-dev @angularclass/hmr

配置 hmr 文件

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

文件内容如下

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

然后分别在 environment.prod.tsenvironment.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

方法三:

"scripts": {
    …
    "hmr": "ng serve —configuration hmr"
}
评论专区
Q群
Q群
Q群
反馈
纠错