スポンサーリンク
概要
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
|
1 2 3 4 5 |
export const environment = { production: false, apiurl: 'https://hoge' apikey: 'hoge' }; |
環境変数の参照
アプリケーション内では下記のようにenvironmentをインポートして参照する。
prodやlocalなどの環境毎の設定ではなく、environment.tsを参照する事に注意。
|
1 2 3 |
import { environment } from './../../../../environments/environment'; console.log(environment.apikey); |
ビルド環境の設定
作成したlocalといった定義を認識させるにはルートディレクトリ内のangular.jsonを編集する。
buildとserveのconfigurations内にlocal用の設定を追加する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
{ ... "projects": { "hogeapp": { ... "architect": { "build": { ... "configurations": { "local": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.local.ts" } ] }, ... } }, "serve": { ... "configurations": { "local": { "browserTarget": "hogeapp:build:local" }, ... } }, ... } |
ビルドコマンドの設定
package.jso内にng serveやng build用の設定に変更する。
ng serve -c local
といった形で -c (変数名) で指定が可能。
|
1 2 3 4 5 6 7 8 9 |
{ ... "scripts": { "ng": "ng", "start": "ng serve -c local", "build": "ng build --prod", }, ... } |