Angularプロジェクトでの環境変数設定（Angular 15以降）

重要な変更点

Angular 15から、新規プロジェクト作成時にenvironmentsフォルダが自動生成されなくなりました。これはAngularチームによる意図的な設計変更です。

問題の背景

Angular 14以前では、ng newコマンドでプロジェクトを作成すると、デフォルトで以下の環境ファイルが生成されていました：

src/
└── environments/
    ├── environment.ts       // 開発環境用
    └── environment.prod.ts  // 本番環境用

しかしAngular 15以降では、このフォルダは自動的に作成されません。この変更は公式ドキュメントで明記されており、多くの開発者が混乱する原因となりました。

公式の意図

Angularチームは、環境ファイルが必ずしもすべてのプロジェクトで必要ではないと判断しました。必要な場合のみ環境ファイルを追加するよう設計が変更されています。

🛠 推奨解決策: ng generate environments コマンド

Angular CLI 15.1以降では、専用コマンドが追加されています：

ng generate environments

このコマンドを実行すると：

1. environmentsフォルダが自動生成
2. 基本の環境ファイルが作成される
3. angular.jsonの設定が自動更新

生成されるファイル構成

environment.ts

// 開発環境デフォルト設定
export const environment = {
  production: false
};

environment.prod.ts

// 本番環境設定
export const environment = {
  production: true
};

コマンドによりangular.jsonに自動追加される設定例：

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

手動設定方法

既存のプロジェクトで手動設定が必要な場合：

1. フォルダとファイルの作成

mkdir src/environments
touch src/environments/environment.ts
touch src/environments/environment.prod.ts

2. 環境ファイルの内容設定

environment.ts（開発用）:

export const environment = {
  production: false,
  apiUrl: 'http://dev.api.example.com'
};

environment.prod.ts（本番用）:

export const environment = {
  production: true,
  apiUrl: 'https://api.example.com'
};

3. angular.jsonの手動更新

"configurations": {
  "production": {
    // ...他の設定...
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

🔄 高度な環境設定パターン

カスタム環境の追加（例: ステージング環境）

1. 新しい環境ファイル作成

touch src/environments/environment.staging.ts

2. angular.jsonに追加設定

"configurations": {
  // ...既存の設定...
  "staging": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.staging.ts"
      }
    ]
  }
}

3. ビルドコマンドで環境指定

ng build --configuration=staging

実行時環境変数（動的ロード）

ビルド時ではなく実行時に環境変数を設定する方法：

build-scripts/env.js

const fs = require('fs');
const path = require('path');

// NG_APP_プレフィックスの環境変数をフィルタリング
const ngAppEnvVars = Object.entries(process.env)
  .filter(([key]) => key.startsWith('NG_APP_'))
  .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});

const fileContent = `
(function(window) {
  window.__env = ${JSON.stringify(ngAppEnvVars, null, 2)};
})(this);
`;

fs.writeFileSync(
  path.resolve(__dirname, '../src/assets/env.js'), 
  fileContent
);

angular.json 変更点

"scripts": [
  "src/assets/env.js"
]

使用例：

const apiUrl = window.__env.NG_APP_API_URL;

Git管理注意点

生成されるenv.jsはGitで管理しないように：

# 生成ファイルはGit除外
src/assets/env.js

💡 ベストプラクティス

1. 開発と本番で異なる設定が必要な場合のみ環境ファイルを使用する
2. 機密情報（APIキーなど）は環境ファイルに直接書かず、バックエンドで管理
3. TypeScriptの型安全を活用：

   // environment.model.ts
   export interface Environment {
     production: boolean;
     apiUrl: string;
     analyticsId?: string;
   }

4. テスト環境用にenvironment.test.tsを追加することを検討
5. AngularのAPP_INITIALIZERを利用した設定のプリロード

トラブルシューティング

環境ファイルが反映されない場合のチェックリスト:

1. angular.jsonのfileReplacementsパスが正しいか確認
2. ビルドコマンドに--configuration=productionを指定
3. ファイル名のスペルミス（例: environment vs environment)
4. サーバー再起動後に設定変更が反映されるか確認

非推奨の回避策

Angular 14以前へのダウングレードは推奨されません：

# 非推奨
npm install -g @angular/cli@14.2.10

代わりに公式のng generate environmentsまたは手動設定を採用してください。

まとめ

Angular 15以降では：

• ✅ 公式推奨のng generate environmentsを使用
• ⚙️ 必要に応じて手動で環境ファイルを作成可能
• 🚀 高度なユースケースには動的環境変数ロードを検討

環境設定はプロジェクトの重要な基盤です。Angularの最新ベストプラクティスに従い、安全で柔軟な設定を実現してください。