浅谈Angular4实现热加载开发旅程

更新时间：2017年09月08日 09:05:09 作者：mntx

本篇文章主要介绍了浅谈Angular4实现热加载开发旅程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

本文介绍了Angular4实现热加载开发，分享给大家，具体如下：

安装插件

npm install @angularclass/hmr -D

配置插件

 // main.ts
if (environment.production) {
 enableProdMode();
}else {
 if (module.hot) {
  module.hot.accept();
  module.hot.dispose(() => {
   let _styles = document.head.querySelectorAll('style');
   let styles = Array.prototype.slice.call(_styles);
   styles
    .filter((style: any) => style.innerText.indexOf('_ng') !== -1)
    .map((el: any) => document.head.removeChild(el));
  })
 }
}

platformBrowserDynamic().bootstrapModule(AppModule);

配置Typescript

// typings.d.ts
declare var module: NodeModule;
interface NodeModule {
 hot: any;
}

启用热加载

// package.json
ng serve -H d.io --port 3000 --hmr --proxy-config=./proxy.json

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

您可能感兴趣的文章:

详解Angular6 热加载配置方案

AngularJS实现自定义指令及指令配置项的方法
这篇文章主要介绍了AngularJS实现自定义指令及指令配置项的方法,结合实例形式简单总结分析了AngularJS自定义指令及指令配置项的实现技巧,需要的朋友可以参考下
2017-11-11
angularjs实现下拉列表的选中事件示例
本篇文章主要介绍了angularjs实现下拉列表的选中事件示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-03-03
Angular2中select用法之设置默认值与事件详解
在Angular.JS中可以使用数组或对象创建一个下拉列表选项。关于Angular.js中select的基础相信大家应该都已经了解了，那么下面这篇文章主要给大家介绍了Angular2中select用法之设置默认值与事件的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-05-05
深究AngularJS如何获取input的焦点（自定义指令）
本篇文章主要介绍了AngularJS如何获取input的焦点（自定义指令），具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
使用angularjs创建简单表格
AngularJS提供丰富填写表单和验证。我们可以用ng-click来处理AngularJS点击按钮事件，然后使用 $dirty 和 $invalid标志做验证的方式。使用novalidate表单声明禁止任何浏览器特定的验证。下面我们来看看如何使用angularjs创建简单表格
2016-01-01
Angular.js中$apply()和$digest()的深入理解
相信大家都知道$digest()和$apply()是AngularJS中的两个核心并且有时候容易引人误解的部分。我们需要深入理解这两者是如何运作的，从而才能理解AngularJS本身是如何运作的。本文的目的就是介绍$digest()和$apply()是如何确确实实的对你有用的。下面来一起看看吧。
2016-10-10
Angular Component属性绑定target和attr.target的区别分析
这篇文章主要介绍了Angular Component属性绑定target和attr.target的区别分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
AngularJS基础知识笔记之过滤器
在我们开发中经常需要在页面显示给用户的信息需要一定处理格式化，才能显示给用户。比如时间本地化，或者yyyy-MM-dd HH:mm:ss格式，数字精度格式化，本地化，人名格式化等等。在angularjs中为我们提供了叫filter的指令，让我们能够很轻易就能做到着一些列的功能
2015-05-05
AngularJs 弹出模态框（model）
这篇文章主要介绍了AngularJs 弹出模态框（model）的相关资料,需要的朋友可以参考下
2016-04-04
Angular-UI Bootstrap组件实现警报功能
这篇文章主要介绍了Angular-UI Bootstrap组件实现警报功能,对Angular.js services的学习有所帮助，需要的朋友可以参考下
2018-07-07