AngularHMR(热模块替换)功能实现方法

最近一个同事在使用Angular的时候，希望能像VUE那样，修改代码后浏览器不刷新，页面对应修改的组件自动更新的功能。这个功能的名字时HMR (hot module replace)。

稍微研究了一下，发现在angular/cli创建的项目中，实现这个不算太难，步骤如下：

1、首先创建一个src/environments/environment.hmr.ts文件，内容如下

当然，对应的environment.prod.ts和environment.ts需要增加一个hmr:false.

如果environment.ts里面的hmr设置为ture,那么ng serve --hmr也有同样效果。不过我对热替换功能还不是那么相信，重新刷新浏览器能保证状态更加干净一些，所以让environment.ts中的hmr为false.

2、在.angular-cli.json文件的环境中增加hmr的环境，大致如下：

3、在package.json的scripts中增加一个新的命令。（当然也可以不增加，直接运行ng serve --hmr -e=hmr和运行npm run hmr效果一样)

4、安装hmr模块，命令如下：

npm install --save-dev @angularclass/hmr

5、创建src\hmr.ts文件，内容如下：

这事热替换的关键，hmrBootstrap会替换原始的bootstrap(下面会看到), 替换后，当有新的模块更新时，hmr会首先移除掉旧有的模块，然后接收新的模块。这些都是发生在浏览器里面。所以页面不会刷新。

6、更新src\main.ts文件如下：

这里替换就得启动文件，如果设置为hmr，那么调用hmrBootStrap来启动网页，否则就用过去的

7、现在运行npm run hmr或者ng serve --hmr -e=hmr，就实现了热替换功能。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

AJAX XMLHttpRequest对象详解

Django框架利用ajax实现批量导入数据功能

ajax异步加载图片实例分析