Angular TypeScript

Angularで環境変数を使用する

2020年1月4日

スポンサーリンク

概要

Angularでビルド環境毎に変数を持たせる。
(例:テスト用、本番用など)
用途としては下記のような使用方法が考えられる。

1.APIのエンドボイントの変更
2.Git等のソースコード管理に含めたくないAPIKEYなどの情報

スポンサーリンク

スポンサーリンク

方法

ファイルの作成

src/environmentsディレクトリ以下にデフォルトでは下記の2つのファイルが存在する。

environment.prod.ts
environment.ts

ここに新しい環境用のファイルを作成する。
ここではlocalといった環境を定義するとして下記のようなファイルを作成する。

environment.local.ts

ファイルの編集

環境毎に設定したい値を各ファイルに設定する。

environment.prod.ts
environment.ts
environment.local.ts

環境変数の参照

アプリケーション内では下記のようにenvironmentをインポートして参照する。
prodやlocalなどの環境毎の設定ではなく、environment.tsを参照する事に注意。

ビルド環境の設定

作成したlocalといった定義を認識させるにはルートディレクトリ内のangular.jsonを編集する。

buildとserveのconfigurations内にlocal用の設定を追加する。

ビルドコマンドの設定

package.jso内にng serveやng build用の設定に変更する。
ng serve -c local
といった形で -c (変数名) で指定が可能。

-Angular, TypeScript

© 2024 nobu blog Powered by AFFINGER5