KEIS BLOGは株式会社ケイズ・ソフトウェアが運営しています。

KEIS BLOG

Angular -環境設定ファイル


今回は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など環境ごとに異なるものを設定して使うことになると思います。

【関連記事】
3分で構築するRuby on Rails開発環境
続・3分で構築するRuby on Rails開発環境~MySQL設定編~
フラットデザインとレスポンシブデザイン
「Cloudera World Tokyo 2014」に行ってきました
Code Avengers(コードアベンジャーズ)
paizaでスキルチェック ~オンラインハッカソンに挑戦~
そしてスーパープログラマーへ
Hackmeに挑戦!
Railsで作るAPI
Ruby on Rails -turnout-
Ruby on Rails -migration-
Windows 10にアップグレードしてみました
Windows 神モード
Ruby on rails -slim-
WindowsでVimを使う(1)
「Cloudera World Tokyo 2015」に行ってきました
Ruby on Rails -gitignore.io-
Windowsでパッケージ管理
プログラミング言語を武器に例えると
Vagrantで開発環境構築
ワンライナーでWebサーバ起動
Vim like in Chrome
mailcatcher – インストール編
mailcatcher – 設定編
mailcatcher – API編
tigを使ってみました
NodeSchoolに入学
Vim Bootstrapを使ってみる
ギットクエストやってみました
VIM Adventures -LEVEL 1-
VIM Adventures -LEVEL 2-
VIM Adventures -LEVEL 3-
Python -インストール編
Python -パッケージ管理
Python -dateutils-
Python -itertools-
Python -retry-
Python -argparse-
Angular -環境構築編-
Angular -Material-
Angular -loading-
Angular -Pipe-
Angular -Pipes カスタム編-