详解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 相关文章推荐
基于json的jquery地区联动效果代码
Jul 06 Javascript
jquery 检测元素是否存在的实例代码
Nov 19 Javascript
js取整数、取余数的方法
May 11 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
深入理解JavaScript系列(49):Function模式(上篇)
Mar 04 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
canvas轨迹回放功能实现
Dec 20 Javascript
Vue实现表格批量审核功能实例代码
May 28 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 Javascript
详解Vue之计算属性
Jun 20 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 23 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
德生BCL3000的电路分析和打磨
2021/03/02 无线电
德生1994机评
2021/03/02 无线电
sphinx增量索引的一个问题
2011/06/14 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
js字符编码函数区别分析
2008/06/05 Javascript
javascript Firefox与IE 替换节点的方法
2010/02/24 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
2015/09/23 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
vue.js学习之递归组件
2016/12/13 Javascript
js 动态生成html 触发事件传参字符转义的实例
2017/02/14 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
[35:55]完美世界DOTA2联赛PWL S3 Rebirth vs CPG 第一场 12.11
2020/12/13 DOTA
python字典序问题实例
2014/09/26 Python
Python使用django获取用户IP地址的方法
2015/05/11 Python
Python中return语句用法实例分析
2015/08/04 Python
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
Django 用户认证组件使用详解
2019/07/23 Python
Python with语句用法原理详解
2020/07/03 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
就业推荐表自我鉴定
2013/10/29 职场文书
告诉你怎样写创业计划书
2014/01/27 职场文书
参观考察邀请函范文
2014/01/29 职场文书
小区消防演习方案
2014/02/21 职场文书
个人合作协议范本
2015/08/06 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js