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