国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Aceyclee / 3476人閱讀

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

??提供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系列???

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98247.html

相關文章

  • webpack工具鏈熱替換 -- angularjs的粗放式實現

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

    Eminjannn 評論0 收藏0

  • ReactNative-HMR原理探索

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

    GT 評論0 收藏0

  • Webpack HMR 原理解析

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

    Ververica 評論0 收藏0

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

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

    changfeng1050 評論0 收藏0

  • 如何打造一個令人愉悅的前端開發環境（四）

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

    StonePanda 評論0 收藏0

發表評論

0條評論

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