详解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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
InnerHtml和InnerText的区别分析
Mar 13 Javascript
JavaScript 动态生成方法的例子
Jul 22 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
director.js实现前端路由使用实例
Feb 03 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
JS实现的文件拖拽上传功能示例
May 21 Javascript
vue+element-ui动态生成多级表头的方法
Aug 28 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 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
Win2003服务器安全加固设置--进一步提高服务器安全性
2007/05/23 PHP
ionCube 一款类似zend的PHP加密/解密工具
2010/07/25 PHP
利用PHP fsockopen 模拟POST/GET传送数据的方法
2015/09/22 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
JavaScript 常用函数
2009/12/30 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
表单元素的submit()方法和onsubmit事件应用概述
2013/02/01 Javascript
javascript数组的使用
2013/03/28 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
JavaScript闭包_动力节点Java学院整理
2017/06/27 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
20个最常见的jQuery面试问题及答案
2018/05/23 jQuery
Python基于回溯法子集树模板实现图的遍历功能示例
2017/09/05 Python
Django实现一对多表模型的跨表查询方法
2018/12/18 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
2014/03/07 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
EVE LOM英国官网:全世界最好的洁面膏
2017/10/30 全球购物
工作自我评价分享
2013/12/01 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
服装促销活动方案
2014/02/23 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
医院见习报告范文
2014/11/03 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
护理自荐信
2019/05/14 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
AngularJS实现多级下拉框
2022/03/25 Javascript
mysql数据库实现设置字段长度
2022/06/10 MySQL
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技