Angular #7 Environments Switch
2017/12/30 12:38:22
0
926
Angular #7 Environments Switch
簡介 |
本篇將會說明在 Angular Cli 如何透過指令切換環境變數 |
作者 |
江崑成 |
前言
一般在開發時,通常會有許多環境變數,依內部測試機、客戶測試機或是正式機而有所不同,Angular Cli 也提供了環境切換的彈性,讓我們可以在編譯時選擇要使用的環境變數。
環境變數檔
透過 Angular Cli 建立的專案,會自動產生環境變數檔,位置如下:
![](/tpu/File/html/201712/20171230112352/images/20171230111528.jpg)
預設有二個變數檔
- environment.ts:提供引用時的 import 基底檔案
- environment.prod.ts:預設提供給正式環境用的檔案
預設環境變數
Angular 在 main.ts 也是透過環境變數來切換要不要 enableProdMode()
![](/tpu/File/html/201712/20171230112352/images/20171230111712.jpg)
使用環境變數
Step 1. 我們先在預設的 environment.ts 增加一個參數
![](/tpu/File/html/201712/20171230112352/images/20171230111754.jpg)
Step 2. 在 AppComponent 引用並設定給 AppComponent 的變數
![](/tpu/File/html/201712/20171230112352/images/20171230111819.jpg)
Step 3. 將 env Binding 至 HTML 頁面
![](/tpu/File/html/201712/20171230112352/images/20171230111846.jpg)
Step 4. 執行 `ng s` 將會使用預設的變數檔(environment.ts)。
![](/tpu/File/html/201712/20171230112352/images/20171230111911.jpg)
![](/tpu/File/html/201712/20171230112352/images/20171230111925.jpg)
切換環境變數
Step 1. 一樣在 environment.prod.ts 增加一個相同參數
![](/tpu/File/html/201712/20171230112352/images/20171230112016.jpg)
Step 2. 執行 `ng s --env=prod` 將會使用 environment.prod.ts
![](/tpu/File/html/201712/20171230112352/images/20171230112043.jpg)
![](/tpu/File/html/201712/20171230112352/images/20171230112056.jpg)
新增環境變數檔
Step 1. 在 environments 資料夾新增 environment.dev.ts,並將 env 改為 'dev'
![](/tpu/File/html/201712/20171230112352/images/20171230112136.jpg)
Step 2. 開啟 angular-cli.json 可以看到預設的環境變數對應
![](/tpu/File/html/201712/20171230112352/images/20171230112201.jpg)
Step 3. 新增環境變數檔對應
![](/tpu/File/html/201712/20171230112352/images/20171230112224.jpg)
Step 4. 執行 `ng s --env=test` 將會使用 environment.test.ts
![](/tpu/File/html/201712/20171230112352/images/20171230112254.jpg)
![](/tpu/File/html/201712/20171230112352/images/20171230112309.jpg)