问道Angular——Angular5/6/7项目添加热更新(HMR)功能

Aceyclee 发布于2019-08-23 12:17 / 3438人阅读

摘要：提供以上热更新功能使用初始化项目命令行进入该目录启动项目将附带功能。

提供angular6以上HMR(热更新)功能

使用hmr-cli

npm i -g hmr-cli

初始化angular项目,命令行进入该目录

hmr init

npm run hmr启动项目将附带hmr功能。

详细配置如下： Angular6添加HMR environments目录

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
  hmr: false
};

复制environment新增environment.hmr.ts修改hmr:true

export const environment = {
  hmr: true
};

.angular.json文件

build的configurations中添加

"hmr": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.hmr.ts"
    }
  ]
}

serve的configurations中添加

"hmr": {
  "hmr": true,
  "browserTarget": "my-app:build:hmr"
}

tsconfig.app.json的compilerOptions的types中添加

"types": ["node"]

package.json的scripts中添加

"hmr": "ng serve --configuration hmr --open"

安装依赖

npm install --save-dev @angularclass/hmr

src目录下创建hmr.ts

import { NgModuleRef, ApplicationRef } from "@angular/core";
import { createNewHosts } from "@angularclass/hmr";

export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {
  let ngModule: NgModuleRef;
  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();
  });
};

修改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));
}

Angular5添加HMR environments目录

environments.ts和environment.prod.ts增加hmr: false

export const environment = {
  hmr: false
};

复制environment新增environment.hmr.ts修改hmr:true

export const environment = {
  hmr: true
};

.angular-cli.json的environments中添加

"hmr": "environments/environment.hmr.ts"

在package.json的scripts中增加

"hmr": "ng serve --hmr -e=hmr --open"

安装依赖

npm install --save-dev @angularclass/hmr

src目录下创建hmr.ts

import { NgModuleRef, ApplicationRef } from "@angular/core";
import { createNewHosts } from "@angularclass/hmr";

export const hmrBootstrap = (module: any, bootstrap: () => Promise>) => {
  let ngModule: NgModuleRef;
  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();
  });
};

修改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系列☜☜☜

GPU云服务器云服务器热更新移动热更新 android热更新 webpack热更新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98247.html

webpack工具链热替换 -- angularjs的粗放式实现

摘要：参照组件单一职责，单个模块文件仅承担有限职责，。路由声明与组件声明在统一文件内部声明。组件替换约定服务在内部属于单例，实例声明通过的方式，声明服务。指令热替换同样采用较为粗放的容器定位策略，通过路由模板替换实现。 ng-hot-loader 前言 webpack-dev-server自带支持模块热替换特性(HMR)，不刷新页面实现代码局部更新，使用HMR可以大幅提升开发效率。实现目标...

Eminjannn 2019-08-21 11:17 评论0 收藏0
ReactNative-HMR原理探索

摘要：原理探索前言在开始本文前，先简单说下我们在开发项目中，本地的服务究竟扮演的是什么样的角色。这无疑是阉割了一大部分功能综上，如果仅仅用于切图，可能不会有那么多的问题 ReactNative-HMR原理探索前言在开始本文前，先简单说下我们在开发RN项目中，本地的node服务究竟扮演的是什么样的角色。在我们的RN APP中有配置本地开发的地方，只要我们输入我们本地的IP和端口号8081就...

GT 2019-08-22 16:28 评论0 收藏0
Webpack HMR 原理解析

摘要：在过程中会利用简称中的两个方法和。是通过请求最新的模块代码，然后将代码返回给，会根据返回的新模块代码做进一步处理，可能是刷新页面，也可能是对模块进行热更新。该方法返回的就是最新值对应的代码块。 Hot Module Replacement（简称 HMR) 包含以下内容：热更新图热更新步骤讲解 showImg(https://segmentfault.com/img/remote...

Ververica 2019-08-26 13:57 评论0 收藏0
Webpack 2: 生产力工具, 模块热替换(HMR)的几种方式

摘要：更新已经到了这里添加更新说明并说明结合使用的简要步骤参考资料环境在中添加中的设置的要设置为要在你的应用程序入口之前添加如下在有完整的配置入口文件要这样导 2018-01-10 更新 Webpacket 已经到3了, 这里添加更新说明,并说明结合babel-loader使用的简要步骤参考资料 https://doc.webpack-china.org... https://githu...

changfeng1050 2019-08-20 16:11 评论0 收藏0
如何打造一个令人愉悦的前端开发环境（四）

摘要：在前后端分离的前端项目开发中经常用到。是的一个中间件。即是一个重要的功能。配置先来在配置文件中引入添加一个和通信的客户端添加应用入口文件在插件中引入在我们的开发环境中是这样配置的。原文链接此文是我同事写的，搭建Express结合Webpack。以下是正文，后面我会附上我的解读 Express 结合 Webpack 实现HMR 本篇文件主要讲结合 Webpack 和 Express 实...

StonePanda 2019-08-20 12:03 评论0 收藏0