Angularでenvironmentsの中身をいじって環境毎に変数の中身を設定したい

おはようございます。バンナイです。 Angularでenvironmentsの中身をいじって環境毎に変数の中身を設定したいです。

動機

今度新しく作るステージング環境で呼び出すAPIを既にある本番環境で呼び出すAPIとは別にしたい。

デプロイしたい環境に応じてAPIのURLを手作業で書き換えることもできる。

しかし、environmentsの中身をいじればビルドをする際のコマンドを変えるだけでそれが実現できると先輩から教えてもらったのでそれを試してみます。

作業

environments配下にファイルを作成、編集

src/environments 配下に environment.staging.tsを作成。中身は

export const environment = {
  production: false,
  apiUrl:"staging環境でのurl"
};

environment.dev.tsの中身は

export const environment = {
  production: false,
  apiUrl:"dev環境でのurl"
};

environment.prod.tsの中身は

export const environment = {
  production: false,
  apiUrl:"prod環境でのurl"
};

それぞれ以上のようにします。

.angular-cli.jsonの内容を編集

environmentsのところの内容を以下のようにします。

"apps": [
    {
     ・・・略
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "staging": "environments/environment.staging.ts"
      }
    }
  ]

environment を import

変数を利用したい箇所でenvironment を importしたり等。 今回はテストのためにapp.component.tsで環境毎に中身が変わる変数を用意して、変数の中身をapp.component.htmlで画面に表示して、環境毎に変数の中身がちゃんと書き換わっていることを確認します。

app.component.ts

・・・略
import {environment} from "../environments/environment";
・・・略
export class AppComponent {
  public apiUrl = environment.apiUrl;
・・・略

app.component.html

<p>{{apiUrl}}</p>

確認

ローカル環境で確認してみます。

ng s --env=dev

ng s --env=prod

ng s --env=staging

で動かしてみて、それぞれ画面に

dev環境でのurl

prod環境でのurl

staging環境でのurl

と表示されたらオッケーです。

実際にデプロイする時は

ng build --env=staging

等とすればデプロイしたい環境に応じて、コードを書き換えることなく、変数の中身を変更できます。