實務上，因應不同的開發階段，應用程式會運行在開發環境 (Develop Environment)、預備環境 (Staging Environment) 以及正式環境 (Production Environment) 等不同環境內，因此會利用 environments 目錄下的環境設定檔，來定義在不同環境下應用程式內部邏輯所需要的資訊。

利用環境變數檔定義後端服務位址

在 Angular 應用程式中，會將環境變數定義在 environments 目錄之內，並依環境建立各自的設定檔。因此，可以在 environment.ts 中定義後端服務的 API 位址，以在未來的建構時依環境變更其值。

export const environment = {
  production: false,
  api: 'http://localhost:3000',
};

要在程式中使用環境變數，只要將 environment.ts 匯入即可；因此，可以修改 task-remote.service.ts 檔案的後端服務路徑。

import { environment } from '../../../environments/environment';

export class TaskRemoteService {
  private _url = `${environment.api}/tasks`;
}

順帶一提，在程式中所匯入的路徑，會依照其相對位置而有所不同；此時，可以利用 tsconfig.json 內的定義來統一管理。因此可以在 tsconfig.json 中加入環境變數檔案的路徑定義，讓所有使用環境變數的程式可以從 @environment 匯入。

{
  "compilerOptions": {
	...
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@environment": ["./src/environments/environment"]
    }
  }
}

import { environment } from '@environment';

export class TaskRemoteService {
  private _url = `${environment.api}/tasks`;
}

新增預備環境 (Staging Environment) 定義

預設中，利用 Angular CLI 所建立的專案，會包含生產環境 (Production Environment) 的變數定義。當使用 build、serve 與 test 等 Angular CLI 指令時，皆可透過 --configuration 參數的指定來使用不同的環境變數檔案。

若要針對預備環境 (Staging Environment) 設定環境變數，可以先將 environment.ts 複製一份，並將其命名為 environment.staging.ts；接著，在 angular.json 的 configurations 屬性下加入 staging 設定，透過 fileReplacements 屬性可以定義環境變數檔案的替換。

"configurations": {
  "production": { },
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.stage.ts"
      }
    ]
  }
}

如此一來就可以執行 ng build --configuration=staging 來建構預備環境的應用程式封裝檔。若要進一步也在 ng serve 中使用此設定，就需要在 angular.json 中的 serve 屬性加入 staging 定義。

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "todo:build"
  },
  "configurations": {
    "production": {
      "browserTarget": "todo:build:production"
    },
    "staging": {
      "browserTarget": "todo:build:staging"
    }
  }
}

利用 ng build 建構 Angular 應用程式

最後，開發完應用程式後，可以執行 ng build --prod 來建構 Angular 應用程式的封裝檔，其中 --prod 參數與指定 --configuration=production 相同。而所建構出來的檔案預設會放在 dist/todo 目錄內，只是將此目錄的檔案複製到伺服器內即可；順帶一提，若要變更 build 所輸出的目錄，可以修改 angular.json 中 build 屬性下的 outputPath。

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "outputPath": "dist/todo",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "aot": true,
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["./node_modules/@angular/material/prebuilt-themes/indigo-pink.css", "src/styles.css"],
    "scripts": []
  },

結論

Angular 框架在每個開發階段都提供了不少好用的工具，只要擅加利用並搭配 CI 等工具，能簡化所需要的常務作業，更能聚焦在功能需求的實作。