Angular 環境判別方法

Angular アプリケーションが本番環境か開発環境かをチェックする方法

Angular アプリケーションにおいて、本番環境か開発環境かを判別することは、デバッグやパフォーマンス最適化に役立ちます。以下に、その方法を日本語で解説します。

environment.ts ファイルの利用

• このファイルに、本番環境と開発環境のフラグを設定し、それをチェックすることで判別できます。
• environment.ts ファイルは、Angular アプリケーションの設定を定義するファイルです。

例

// environment.ts
export const environment = {
  production: false
};

• production プロパティが true の場合は本番環境、false の場合は開発環境です。

platformBrowserDynamic() 関数のパラメータ

• この関数の第2引数に { enableDebug: true } を渡すと開発モード、渡さなければ本番モードになります。
• platformBrowserDynamic() 関数は、ブラウザ環境で Angular アプリケーションをブートストラップするために使用されます。

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppMod   ule, {
  enableDebug: true // 開発モード
});

PLATFORM_ID トークン

• isPlatformBrowser() 関数を使用して、ブラウザプラットフォームであるかどうかをチェックし、さらに environment.production を参照して本番環境かどうかを判別できます。
• PLATFORM_ID トークンは、アプリケーションが実行されているプラットフォーム（ブラウザ、サーバーなど）を識別するために使用されます。

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component   .css']
})
export class AppComponent {
  isProduction: boolean;

  construct   or(@Inject(PLATFORM_ID) private platformId: string) {
    this.isProduction = !isPlatformBrowser(this.platformId) || environment.production;
  }
}

Angular 環境判別方法のコード解説

// environment.ts
export const environment = {
  production: false
};

• 解説
  
  • このプロパティをチェックすることで、環境を判別できます。

// main.ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppMod   ule, {
  enableDebug: true // 開発モード
});

• 解説
  

import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component   .css']
})
export class AppComponent {
  isProduction: boolean;

  construct   or(@Inject(PLATFORM_ID) private platformId: string) {
    this.isProduction = !isPlatformBrowser(this.platformId) || environment.production;
  }
}

• 解説
  

ng build コマンドのフラグ

• このフラグを指定することで、ビルド時に環境に合わせた処理を実行したり、環境固有の設定を読み込むことができます。
• ng build コマンドでアプリケーションをビルドする際に、--environment フラグを使用して環境を指定することができます。

ng build --environment=production

meta.json ファイルの利用

• このファイルに、環境に合わせた設定を記述し、アプリケーション起動時に読み込むことで環境を判別できます。
• meta.json ファイルは、Angular CLI の設定ファイルです。

例
``json { "$schema": "./node_modules/@angular/cli/lib/config/schema.json", "project": { "root": "", "sourceRoot": "src", "projectType": "application" }, "cli": { "analytics": false }, "architect": { "build": { "builder": "@angular-devkit/build-angular:browser", "options": { "outputPath": "dist", "index": "src/index.html", "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsconfig": "tsconfig.app.json", "assets": [ "src/favicon.ico", "src/assets" ], "styles": [ "src/styles.css" ], "scripts": [] }, "configurations": { "production": { "fileReplacements": [ { "replace": "src/environments/environment.ts", "with": "src/environments/environment.prod.ts" } ], "optimization": true, "outputHashing": "all", "sourceMap": false, "extractCss": true, "namedChunks": false, "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true } } } } }  

この例では、`configurations` セクションに `production` という設定があり、その中でビルド時の処理やファイル置き換えなどが定義されています。

### 3. 環境変数の利用
* Node.js の環境変数を使用して、環境情報をアプリケーションに渡すことができます。
`bash
# ターミナルで環境変数を設定
export NODE_ENV=production

アプリケーション内でのチェック

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComp   onent {
  isProduction: boolean;

  constructor() {
    this.isProduction =    process.env.NODE_ENV === 'production';
  }
}