Angular CLI:配置webpack热模块替换hmr(Hot Module Replacement)

热模块替换(Hot Module Replacement)是Webpack的特性,它可以让我们在调试时不需要重新构建就可以更新代码到正在运行的应用。

Angular CLI需要做一些设置就可以使用webpack的热模块替换功能。

添加依赖

hrm依赖于@angularclass/hmr,安装@angularclass/hmr到dev-dependency

$ npm install --save-dev @angularclass/hmr

添加HMR环境

新建src/environments/environment.hmr.ts文件,内容如下:

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

修改src/environments/environment.prod.ts,添加hmr:false

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

修改src/environments/environment.ts,添加hmr:false

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

修改.angular-cli.json,添加hmr环境

"environments": {
  "dev": "environments/environment.ts",
  "hmr": "environments/environment.hmr.ts",
  "prod": "environments/environment.prod.ts"
},

使用hmr

新建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新增对hmr环境的检查,对于hmr环境使用hmr.ts的hmrBootstrap启动:

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

运行启动

ng server启动

ng serve --hmr -e=hmr

npm脚本启动

在package.json新增脚本

"scripts": {
  ...
  "hmr": "ng serve --hmr -e=hmr"
}

执行

npm run hmr

版权声明:著作权归作者所有。

相关推荐

Angular CLI:解决webpack-dev-server报错Invalid Host Header

Angular cli底层是使用webpack,webpack默认会对访问的主机进行检测,这是为了防止主机受到DNS重新绑定攻击。解决方法根据运行的脚本不同分为两种情况解决。一、angular cli脚本如果是使用angular cli的脚本ng serve启动服务器,可以使用--disable-host-check解决。ng serve 

Angular CLI:集成Angular Flex Layout

Angular CLI创建项目ng new myproject 安装Angular Flex Layoutnpm install @angular/flex-layout --save 导入Angular Flex Layout NgModule模块src/app/app.module.t

查看angular cli版本

ng help version 查看帮助说明$ ng help version ng version <options...>  Outputs Angular CLI version.  aliases: v, --version, -v  --

理解Java 9的open module(公开模块)

模块化是Java 9新增的一个很重要且影响代码结构的特性。分类根据外部代码在编译时和运行时对模块的访问权限不同分为:常规模块(normal module)和公开模块(open module)。编译时访问比较容易理解,即代码能否显式直接使用模块里的类型,没有权限访问,编译时报错。在运行时访问模块代码是指使用Java里的Core Reflection