欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解Angular6 熱加載配置方案

 更新時(shí)間:2018年08月18日 15:06:11   作者:niccky  
這篇文章主要介紹了詳解Angular6 熱加載配置方案,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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 配置文件

文件內(nèi)容如下 :

export const environment = {
 production: false,
 hmr: true
};

然后分別在 environment.prod.ts 和 environment.ts 添加 hmr:false 配置項(xiàng)

配置 src/tsconfig.app.json 文件

"compilerOptions": {
 ...
 "types": ["node"]
}

如果不配置上面的 "types":["node"], 則會(huì)報(bào)錯(cuò)

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 文件內(nèi)容如下

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 文件內(nèi)容如下

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
  }
 }
},

啟動(dòng)應(yīng)用

  • 方式一:ng serve --configuration hmr
  • 方式二:ng run ng6:serve:hmr

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)

    AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)

    下面小編就為大家?guī)?lái)一篇AngularJS 路由和模板實(shí)例及路由地址簡(jiǎn)化方法(必看)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2016-06-06
  • Angularjs添加排序查詢功能的實(shí)例代碼

    Angularjs添加排序查詢功能的實(shí)例代碼

    這篇文章主要介紹了Angularjs添加排序查詢功能的實(shí)例代碼,需要的朋友可以參考下
    2017-10-10
  • AngularJS實(shí)現(xiàn)表單元素值綁定操作示例

    AngularJS實(shí)現(xiàn)表單元素值綁定操作示例

    這篇文章主要介紹了AngularJS實(shí)現(xiàn)表單元素值綁定操作,結(jié)合具體實(shí)例形式分析了AngularJS針對(duì)表單元素屬性相關(guān)操作技巧,需要的朋友可以參考下
    2017-10-10
  • AngularJS指令中的綁定策略實(shí)例分析

    AngularJS指令中的綁定策略實(shí)例分析

    這篇文章主要介紹了AngularJS指令中的綁定策略,結(jié)合實(shí)例形式分析了scope綁定策略的分類與具體實(shí)現(xiàn)方法,需要的朋友可以參考下
    2016-12-12
  • AngularJS使用ng-options指令實(shí)現(xiàn)下拉框

    AngularJS使用ng-options指令實(shí)現(xiàn)下拉框

    這篇文章主要介紹了AngularJS使用ng-options指令實(shí)現(xiàn)下拉框效果,ng-option指令使用也很簡(jiǎn)單,下文具體給大家說(shuō)明,對(duì)angularjs 下拉框知識(shí)感興趣的朋友一起看下吧
    2016-08-08
  • 詳解Angular操作cookies方法

    詳解Angular操作cookies方法

    這篇文章主要介紹了詳解Angular操作cookies方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-06-06
  • angular ng-click防止重復(fù)提交實(shí)例

    angular ng-click防止重復(fù)提交實(shí)例

    本篇文章主要介紹了angular ng-click防止重復(fù)提交實(shí)例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-06-06
  • angularjs獲取到My97DatePicker選中的值方法

    angularjs獲取到My97DatePicker選中的值方法

    今天小編就為大家分享一篇angularjs獲取到My97DatePicker選中的值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2018-10-10
  • 詳解Angular-Cli中引用第三方庫(kù)

    詳解Angular-Cli中引用第三方庫(kù)

    本篇文章主要介紹了詳解Angular-Cli中引用第三方庫(kù) ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-05-05
  • angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別

    angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別

    這篇文章主要介紹了angular 數(shù)據(jù)綁定之[]和{{}}的區(qū)別,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-09-09

最新評(píng)論