@myyue214 死球

什么是HMR？

噢，你自己看看这里的官方文档就好了，不解释。

@angluar/cli 默认没有很好地支持HMR，我们需要手动做一些事情。

请跟我一步一步来玩。

第一步：修改环境配置文件

为了后续操作能顺利进行，首先需要修改默认生成的两份环境配置文件：src/environments/environment.ts 和 src/environments/environment.prod.ts

在这两份配置文件里面都增加一个配置项hmr:false，变成这样：

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

第二步：新建一份hmr配置文件

创建一份全新的环境配置文件：src/environments/environment.hmr.ts

environment.hmr.ts 里面的内容如下：

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

修改.angular-cli.json，加一行配置，变成这样：

"environmentSource": "environments/environment.ts",
"environments": {
      ...
      "hmr": "environments/environment.hmr.ts",
}

修改package.json，加一行脚本：

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

第三步：安装第三方支持模块同时写一些代码

npm install --save-dev @angularclass/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(currentModule => ngModule = currentModule);
  module.hot.dispose(() => {
      const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);
      const elements = appRef.components.map(c => c.location.nativeElement);
      const removeOldHosts = createNewHosts(elements);
      ngModule.destroy();
      removeOldHosts();
  });
};

代码很简单，相信你能看懂，不解释了。

写一行代码很简单，解释一行代码可能需要一千行注释，故：一码胜千言。

修改默认生成的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('Ammm.. HMR is not enabled for webpack');
    }
} else {
    bootstrap();
}

第四步：启动项目

npm run hmr

然后你会看到这样的警告，无视就好了：

注意点

• HMR的好处是：开发的时候不需要每次都整体刷新浏览器，只替换被修改过的模块
• 不要把HMR在生产环境里面，因为你不能每次改了代码都去刷所有客户的浏览器
• HMR启动的方式不是ng serve，而是npm run hmr，请特别注意一下。

cli v6.x已经内置了HMR支持

特别注意:最新的@angular/cli 6.x 版本已经内置了 HMR 支持，只要执行以下命令即可（上面的所有步骤都不需要了，所以赶紧升级到V6.0吧！）：

ng serve --hmr

OpenWMS这个项目的前端已经升级到V6.0.0，有需要参考一下吧：https://gitee.com/mumu-osc/OpenWMS-Frontend/invite_link?invite=55233fd7f770d4d27211249dd70ed32a76b37f35b73c0d4cd1951d64d3940eac1a09551ecc8036f6

本文由 @业余小编 意译改写，英文版原文在这里：https://medium.com/wizardnet972/hot-module-replacement-with-angular-cli-5fc7a3ae4a9c

Stephen Fluin 和 Kara Ericson 在Google I/O 2018上的演讲视频已转到百度网盘，请点这里下载：

https://pan.baidu.com/s/1QNzbbAH4TETi7Dfe-WcC7A

油管地址在这里：https://www.youtube.com/watch?v=jnp_ny4SOQE

在这次的演讲中，Kara 提到，即将到来的Ivy renderer将会带来大幅度的体积压缩和渲染性能提升，请看截图：

@山茶树和葡萄树 你去试试看，不试怎么知道自己是不是真的不行

Angular正式发布了V6.0，我们已经可以利用对应的@angular/cli V6.0来直接开发PWA应用了。

第一步：安装@angular/cli V6.0

如果你机器上有老版本，请先卸载。

打开你的终端，执行：

npm install -g @angular/cli

安装成功之后用ng -v 查看一下版本号：

第二步：new一个空项目

执行：

ng new test-ng-pwa

创建成功之后把项目起来看一下，执行：

ng serve --open

浏览器里面看到这个界面说明一切OK：

第三步：添加PWA支持

把项目停掉，然后在终端里面执行：

ng add @angular/pwa

效果如下：

因为@angular/cli内置的Server在--prod 编译的时候还不支持service-worker，所以上面装了一个第三方的lite-server，它的官方文档在这里：https://npmjs.com/package/lite-server ，请执行：

npm install lite-server --save-dev
npm install lite-server --global

装完之后，执行：

npx ng build --prod && lite-server --baseDir dist/test-ng-pwa

然后打开你的浏览器访问3000端口，可以看到service-worker已经起成功了：

这时候你已经可以把应用添加到桌面上了：

这是Windows上的效果：

Linux、iOS、Android、ChromeOS最新的版本都已经全部支持，你自己去试试吧！

• 英文原版链接在这里：https://pwa.ng/
• 中文版原文链接：http://www.ngfans.net/topic/213/post

本文由 @业余小编 意译改写，请保留署名。

默认情况下，加载的最小单位是module，不能做到component级别的加载。

（除非你用一些猥琐的方式，能做到单个组件级的加载）