angular實現一次打包,多服務器運行

Angular CLI應用程序環境的侷限性

1. 每種環境都需要單獨的構建:構建時要求您爲每個環境生成不同的配置,應用程序代碼一旦更改,則需要爲每個環境運行一次編譯打包命令,這樣既耗時又影響開發效率
2. 將應用程序配置部分存儲在應用程序代碼存儲庫中可能會帶來安全風險。

問題描述: 在實際開發過程中,稍微大點的angular項目打包一次可能會耗時半個小時

解決方案: 在不重新構建Angular應用程序的情況下，將我們的Angular應用程序部署在具有不同配置的不同環境（階段，生產，客戶端A，客戶端B等）中

1.在應用程序index.html文件的同一目錄中創建一個新文件config.js，這將__env在瀏覽器窗口中提供一個特殊的（全局）變量，其中包含應用程序的環境變量。

(function (window) {



(function (window) {
  window.__env = window.__env || {};


  // 生產環境
  window.__env = {
    production: false,
    requestPath: 'http://liangjiang.zongzhipro.harzone.com:8003/zongzhi-server-final', 
  }

  // 服務器1
  /*window.__env = {
    production: true,
    requestPath: 'http://liangjiang.zongzhipro.harzone.com:8003/zongzhi-server-final', 
  }*/

  // 服務器2
  /*window.__env = {
    production: true,
    requestPath: 'http://zzzx.liangjiang.gov.cn:8002/zongzhi-server',
  }*/

}(this));

2. 在index.html中引入config.js
   

3.爲了確保在運行ng build時將文件複製到輸出目錄，必須將其添加到angular.json應用程序構建配置的assets中：

4. 現在我們已經可以將環境變量作爲__env全局window對象上的特殊屬性使用，創建可以訪問我們的環境變量的服務，以便可以在應用程序中的任何位置讀取環境變量。

爲此，我們將設置以下部分：

創建一個env.service.ts服務

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class EnvService {
  //默認值
  public production = false;
  public requestPath: 'http://liangjiang.zongzhipro.harzone.com:8003/zongzhi-server-final1'; 

  constructor() {
  }
}

新建env.service.provider.ts文件,使用EnvServiceFactory類來創建實例,.
在EnvService類定義中分配給變量的值是默認值env.js，假設存在env.js且可以成功加載，則默認值將被自定義值覆蓋。
如果env.js無法加載，則應用程序將退回到EnvService該類中定義的默認值

import { EnvService } from './env.service';

export const EnvServiceFactory = () => {
  // Create env
  const env = new EnvService();

  // Read environment variables from browser window
  const browserWindow = window || {};
  const browserWindowEnv = browserWindow['__env'] || {};

  // Assign environment variables from browser window to env
  // In the current implementation, properties from env.js overwrite defaults from the EnvService.
  // If needed, a deep merge can be performed here to merge properties instead of overwriting them.
  for (const key in browserWindowEnv) {
    if (browserWindowEnv.hasOwnProperty(key)) {
      env[key] = window['__env'][key];
    }
  }

  return env;
};

export const EnvServiceProvider = {
  provide: EnvService,
  useFactory: EnvServiceFactory,
  deps: [],
};

5. 導出EnvServiceProvider,在Angular的依賴項注入系統中將其列爲應用程序providers數組中的提供者
   

6.使用環境變量

import { Component } from '@angular/core';  
import { EnvService } from '..env/env.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
})
export class HomeComponent {  
  constructor(
    private env: EnvService
  ) {
    console.log(this.env.requestPath);
  }
}

7.使用ng build --prod命令構建應用程序，env.js將出現在dist目錄中：

8.編譯打包後如果想要在另一個服務器環境部署,直接修改config裏面的變量,刷新瀏覽器後,即可獲取新的環境變量

參考地址:https://jvandemo.com/how-to-use-environment-variables-to-configure-your-angular-application-without-a-rebuild/