Angular -環境設定ファイル

2018年05月21日
CATEGORY- 1. 技術力｛技術情報｝

今回はAngularで環境ごとの設定ファイルを作っていきたいと思います。

まず、設定ファイルの場所ですが、appディレクトリと同じ階層にある
environmentsディレクトリの中にあります。

はじめからprodと開発用のファイルは用意されているので、
今回はlocal用の設定ファイルを作りたいと思います。

local用なので、「environment.local.ts」という名前のファイルを作成します。

ファイルの内容は下記のようにします。

export const environment = {
  production: false,
  title: 'local environment'
};

次にsrcディレクトリと同じ階層にある「.angular-cli.json」ファイルに設定を追加します。

"environments": {
 "local": "environments/environment.local.ts",
 "dev": "environments/environment.ts",
 "prod": "environments/environment.prod.ts"
}

devとprodの設定は初めからあるので、localの設定を追加します。

設定ファイルを指定して起動するには下記のように「-e local」をつけて実行します。

ng serve -e local

次に設定ファイルの値を使うには、app.component.tsにimport文を追加します。

import { Component } from '@angular/core';
import { environment } from '../environments/environment';
 
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 title: string;

  ngOnInit(){
 this.title = environment.title;
 }
}

あと、app.component.htmlも値を出力するように修正します。

<div style="text-align:center">
  <h1>
    Angular Sample
  </h1>
</div>
{{title}}

すると、環境ファイルの値が画面に出力されます。

今回はただの文字列を設定しましたが、実際は、APIのURLなど環境ごとに異なるものを設定して使うことになると思います。

2018年05月21日
CATEGORY- 1. 技術力｛技術情報｝

Angular -環境設定ファイル

CATEGORY

LATEST ENTRY

セマンティックバージョニング

Changelogの効率的な管理

コンベンショナルコミットとは？: ガイドラインと実例

Gitで既存のコミットを2つに分割する方法

秀長に学ぶ(5)

TAG