详解Angular6 热加载配置方案


Posted in Javascript onAugust 18, 2018

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

示例 ng 版本如下 :

$ ng --version

   _           _         ____ _   ___
  / \  _ __  __ _ _  _| | __ _ _ __   / ___| |  |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|  | |  | |  | |
 / ___ \| | | | (_| | |_| | | (_| | |   | |___| |___ | |
 /_/  \_\_| |_|\__, |\__,_|_|\__,_|_|    \____|_____|___|
        |___/


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

npm install --save-dev @angularclass/hmr --registry https://registry.npm.taobao.org

配置 hmr 文件

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

文件内容如下 :

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

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

配置 src/tsconfig.app.json 文件

"compilerOptions": {
 ...
 "types": ["node"]
}

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

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 文件内容如下

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().catch(err => console.log(err));
}

配置 angular.json 文件

...
"build": {
 "builder": "@angular-devkit/build-angular:browser",
 "options": {
  "outputPath": "dist/ng6",
  "index": "src/index.html",
  "main": "src/main.ts",
  "polyfills": "src/polyfills.ts",
  "tsConfig": "src/tsconfig.app.json",
  "assets": ["src/favicon.ico", "src/assets"],
  "styles": ["src/styles.css"],
  "scripts": []
 },
 "configurations": {
  "hmr": {
   "fileReplacements": [
    {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.hmr.ts"
    }
   ]
  },
  "production": {
   "fileReplacements": [
    {
     "replace": "src/environments/environment.ts",
     "with": "src/environments/environment.prod.ts"
    }
   ],
   "optimization": true,
   "outputHashing": "all",
   "sourceMap": false,
   "extractCss": true,
   "namedChunks": false,
   "aot": true,
   "extractLicenses": true,
   "vendorChunk": false,
   "buildOptimizer": true
  }
 }
},
...
"serve": {
 "builder": "@angular-devkit/build-angular:dev-server",
 "options": {
  "browserTarget": "ng6:build"
 },
 "configurations": {
  "production": {
   "browserTarget": "ng6:build:production"
  },
  "hmr": {
   "browserTarget": "ng6:build:hmr",
   "hmr": true
  }
 }
},

启动应用

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js获取元素在浏览器中的绝对位置
Jul 24 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
js使用ajax读博客rss示例
May 06 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
vue.js学习笔记:如何加载本地json文件
Jan 17 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
angularjs自定义过滤器demo示例
Aug 24 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
javascript实现获取中文汉字拼音首字母
May 19 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 #Javascript
vue下history模式刷新后404错误解决方法
Aug 18 #Javascript
详解javascript appendChild()的完整功能
Aug 18 #Javascript
vue中的自定义分页插件组件的示例
Aug 18 #Javascript
vue 自定义提示框(Toast)组件的实现代码
Aug 17 #Javascript
微信小程序实现即时通信聊天功能的实例代码
Aug 17 #Javascript
在iFrame子页面里实现模态框的方法
Aug 17 #Javascript
You might like
PHP连接Nginx服务器并解析Nginx日志的方法
2015/08/16 PHP
php上传图片获取路径及给表单字段赋值的方法
2016/01/23 PHP
PHP中header用法小结
2016/05/23 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP自定义函数判断是否为Get、Post及Ajax提交的方法
2017/07/27 PHP
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
使用Node.js实现HTTP 206内容分片的教程
2015/06/23 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
vue深入解析之render function code详解
2017/07/18 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
Vue页面骨架屏注入方法
2018/05/13 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
简单的Apache+FastCGI+Django配置指南
2015/07/22 Python
python画一个玫瑰和一个爱心
2020/08/18 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
详解Scrapy Redis入门实战
2020/11/18 Python
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
iframe在移动端的缩放的示例代码
2018/10/12 HTML / CSS
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
最新大学生自我评价
2013/09/24 职场文书
寒假思想汇报
2014/01/10 职场文书
中专自我鉴定
2014/02/05 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
请假条的格式
2014/04/11 职场文书
考博专家推荐信
2014/05/10 职场文书
解除劳动关系协议书范文
2014/09/11 职场文书
股东合作协议书
2014/09/12 职场文书
企业法人代表证明书
2014/09/27 职场文书
2015年度服装销售工作总结
2015/03/31 职场文书
2015毕业生实习期工作总结
2015/04/09 职场文书
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers
基于Python实现对比Exce的工具
2022/04/07 Python