详解Angular6 热加载配置方案

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

示例 ng 版本如下：

/ \ | | / | | | |
/ △ \ | ' \ / ` | | | | |/ ` | '| | | | | | |
/ | | | | (| | || | | (| | | | |__| | | |
// __| ||_,|_,||_,|| __|__||
|/

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 依赖包

配置 hmr 文件

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

文件内容如下：

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

配置 src/tsconfig.app.json 文件

如果不配置上面的 "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 文件

启动应用

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

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

详解Angular6 热加载配置方案

示例 ng 版本如下 ：

Package Version

安装 hmr 依赖包

配置 hmr 文件

猜你在找的JavaScript相关文章

示例 ng 版本如下：