Angularで環境別の環境変数を設定する

environmentファイルを使う

angular-cliを使用してプロジェクトを作成するとデフォルトでenvironment.tsenvironment.prod.tsファイルが作成されます。environmentは直訳すると環境の意味で、environmentファイルはアプリケーションに関わる定数などを設定します。

たとえば

  • ドメイン名
  • apiのURL
  • Firebase等の情報

などになるかと思います。

ng newで作成したプロジェクトのままではenvironment.tsのみを使用するようになっており、enviroment.prod.tsは使用できません。package.jsonの修正も必要になりますが、まずは環境毎のファイルを決めます。prodはおそらくproduct(製品)の意味だと思われますので

ファイル名 用途
environment.ts 開発環境用
environment.prod.ts 実行環境用

とします。

enviromentファイルに追記する

2つのenvironmentファイルの違いを見るためにドメイン名を記載してみます。

package.jsonの編集

毎回ngコマンドを発行するのは面倒なので、package.jsonにscriptを記載しておきます。

これでnpm startでenvironment.ts(開発環境用)を使用、npm run start:prodでenvironment.prod.ts(実行環境用)を使用することになります。

使用する

適当なところにenviromentを使用したコードを書いてみます。注意するところは使用する際にimportの指定はenviroment.tsにしなければならないところです。prodを指定してはいけません。

実行

npm startの実行結果は

npm run start:prodの実行結果は

となります。

変数の宣言漏れがあった場合

もし、environment.tsにDOMAIN_NAME変数が定義されており、environment.prod.tsにDOMAIN_NAME変数が定義されていない場合、npm startではエラーが発生しませんが、npm run start:prodでは下記のようなエラーが発生します。

つまり、各environmentファイルには共通の変数が必要になり、書き漏れがあったとしてもエラーとして警告してくれるため安心して使用できます。

Document

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/application-environments.md

スポンサーリンク
レタリング(大)広告
レタリング(大)広告

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
レタリング(大)広告