成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

問道Angular——Angular5/6/7項目添加熱更新(HMR)功能

Aceyclee / 3489人閱讀

摘要：提供以上熱更新功能使用初始化項目命令行進入該目錄啟動項目將附帶功能。

??提供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
};

復(fù)制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目錄下創(chuàng)建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
};

復(fù)制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目錄下創(chuàng)建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系列???

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98247.html

相關(guān)文章

  • webpack工具鏈熱替換 -- angularjs的粗放式實現(xiàn)

    摘要：參照組件單一職責(zé)，單個模塊文件僅承擔(dān)有限職責(zé)，。路由聲明與組件聲明在統(tǒng)一文件內(nèi)部聲明。組件替換約定服務(wù)在內(nèi)部屬于單例，實例聲明通過的方式，聲明服務(wù)。指令熱替換同樣采用較為粗放的容器定位策略，通過路由模板替換實現(xiàn)。 ng-hot-loader 前言 webpack-dev-server自帶支持模塊熱替換特性(HMR)，不刷新頁面實現(xiàn)代碼局部更新，使用HMR可以大幅提升開發(fā)效率。 實現(xiàn)目標(biāo)...

    Eminjannn 評論0 收藏0

  • ReactNative-HMR原理探索

    摘要：原理探索前言在開始本文前，先簡單說下我們在開發(fā)項目中，本地的服務(wù)究竟扮演的是什么樣的角色。這無疑是閹割了一大部分功能綜上，如果僅僅用于切圖，可能不會有那么多的問題 ReactNative-HMR原理探索 前言 在開始本文前，先簡單說下我們在開發(fā)RN項目中，本地的node服務(wù)究竟扮演的是什么樣的角色。在我們的RN APP中有配置本地開發(fā)的地方，只要我們輸入我們本地的IP和端口號8081就...

    GT 評論0 收藏0

  • Webpack HMR 原理解析

    摘要：在過程中會利用簡稱中的兩個方法和。是通過請求最新的模塊代碼，然后將代碼返回給，會根據(jù)返回的新模塊代碼做進一步處理，可能是刷新頁面，也可能是對模塊進行熱更新。該方法返回的就是最新值對應(yīng)的代碼塊。 Hot Module Replacement（簡稱 HMR) 包含以下內(nèi)容： 熱更新圖 熱更新步驟講解 showImg(https://segmentfault.com/img/remote...

    Ververica 評論0 收藏0

  • Webpack 2: 生產(chǎn)力工具, 模塊熱替換(HMR)的幾種方式

    摘要：更新已經(jīng)到了這里添加更新說明并說明結(jié)合使用的簡要步驟參考資料環(huán)境在中添加中的設(shè)置的要設(shè)置為要在你的應(yīng)用程序入口之前添加如下在有完整的配置入口文件要這樣導(dǎo) 2018-01-10 更新 Webpacket 已經(jīng)到3了, 這里添加更新說明,并說明結(jié)合babel-loader使用的簡要步驟 參考資料 https://doc.webpack-china.org... https://githu...

    changfeng1050 評論0 收藏0

  • 如何打造一個令人愉悅的前端開發(fā)環(huán)境（四）

    摘要：在前后端分離的前端項目開發(fā)中經(jīng)常用到。是的一個中間件。即是一個重要的功能。配置先來在配置文件中引入添加一個和通信的客戶端添加應(yīng)用入口文件在插件中引入在我們的開發(fā)環(huán)境中是這樣配置的。 原文鏈接此文是我同事寫的，搭建Express結(jié)合Webpack。以下是正文，后面我會附上我的解讀 Express 結(jié)合 Webpack 實現(xiàn)HMR 本篇文件主要講結(jié)合 Webpack 和 Express 實...

    StonePanda 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<