Angular 6でangular.jsonファイルを使って環境変数を設定する方法

2024-04-02

Angular 6で環境変数をng serveで設定する方法

設定方法

環境変数を設定するには、以下の2つの方法があります。

環境変数ファイルを使う

.envという名前のファイルを作成し、そこに環境変数を設定します。.envファイルは、プロジェクトのルートディレクトリに配置する必要があります。

例：

# .envファイル

API_URL=https://dev.example.com

.envファイルを作成したら、ng serveコマンドを実行する際に--envオプションを指定して、使用する環境変数ファイルを選択します。

ng serve --env dev

コマンドラインオプションを使う

ng serveコマンドを実行する際に--envオプションを指定して、環境変数を直接設定することができます。

ng serve --env.API_URL=https://dev.example.com

設定できる環境変数

ng serveコマンドで設定できる環境変数は以下の通りです。

API_URL: APIのエンドポイントURL
APP_ENV: アプリケーションの環境（例：dev、prod）
PORT: 開発サーバーのポート番号

注意点

.envファイルは、gitignoreファイルに追加する必要があります。
コマンドラインオプションで設定した環境変数は、ng buildコマンドを実行してもビルド時の設定には反映されません。

補足

上記の方法以外にも、angular.jsonファイルを使って環境変数を設定することもできます。
環境変数を設定する方法は、プロジェクトの規模や要件によって異なります。

環境変数ファイルを使う

# .envファイル

API_URL=https://dev.example.com
APP_ENV=dev

# src/app/app.component.ts

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  apiURL = environment.API_URL;
  appEnv = environment.APP_ENV;
}

# src/app/app.component.html

<h1>{{ apiURL }}</h1>
<p>環境: {{ appEnv }}</p>

# コマンド

ng serve --env dev

コマンドラインオプションを使う

# コマンド

ng serve --env.API_URL=https://dev.example.com --env.APP_ENV=dev

# src/app/app.component.ts

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  apiURL = environment.API_URL;
  appEnv = environment.APP_ENV;
}

# src/app/app.component.html

<h1>{{ apiURL }}</h1>
<p>環境: {{ appEnv }}</p>

実行結果

https://dev.example.com

環境: dev

補足

上記のサンプルコードでは、API_URLとAPP_ENVという2つの環境変数を設定しています。
app.component.tsファイルでは、environmentオブジェクトを使って、設定した環境変数にアクセスしています。
app.component.htmlファイルでは、{{ apiURL }}と{{ appEnv }}というディレクティブを使って、環境変数の値を表示しています。

Angular 6で環境変数を設定するその他の方法

angular.jsonファイルを使う

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": {},
      "architect": {
        "build": {
          "options": {
            "environment": "dev"
          }
        },
        "serve": {
          "options": {
            "browserTarget": "my-app:build",
            "environment": "dev"
          }
        }
      }
    }
  },
  "defaultProject": "my-app"
}

上記の設定の場合、ng serveコマンドを実行すると、dev環境用の設定が適用されます。

環境変数サービスを使う

@ng-bootstrap/ng-bootstrapのような環境変数サービスを使うこともできます。

import { Injectable } from '@angular/core';
import { Environment } from '@ng-bootstrap/ng-bootstrap';

@Injectable({
  providedIn: 'root'
})
export class MyEnvironmentService {
  constructor(private environment: Environment) {}

  getAPIUrl(): string {
    return this.environment.API_URL;
  }

  getAppEnv(): string {
    return this.environment.APP_ENV;
  }
}

# src/app/app.component.ts

import { Component } from '@angular/core';
import { MyEnvironmentService } from './my-environment.service';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor(private environmentService: MyEnvironmentService) {}

  apiURL = this.environmentService.getAPIUrl();
  appEnv = this.environmentService.getAppEnv();
}

# src/app/app.component.html

<h1>{{ apiURL }}</h1>
<p>環境: {{ appEnv }}</p>

小規模なプロジェクトの場合、ng serveコマンドラインオプションを使うのが最も簡単です。
大規模なプロジェクトの場合、angular.jsonファイルを使うのがおすすめです。
環境変数を複雑なロジックで設定する必要がある場合は、環境変数サービスを使うのがおすすめです。

angular angular6 angular-cli