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など環境ごとに異なるものを設定して使うことになると思います。
【関連記事】
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 カスタム編-
- 2018年05月21日
- CATEGORY- 1. 技術力{技術情報}