Angular 6環境設定ガイド

Angular 6 で ng serve を使って環境を設定する方法の日本語解説

理解するポイント

• 環境設定 はアプリケーションの動作や外観を制御するための設定ファイルや変数の調整を指します。
• ng serve は Angular 開発中にアプリケーションをローカルサーバーでビルドして実行するコマンドです。

具体的な方法

1. プロジェクトのルートディレクトリでターミナルを開く

   • Angular プロジェクトのトップレベルのフォルダに移動します。

2. ng serve コマンドを実行する

   • 基本的な実行方法:

     ng serve
     

3. 環境設定ファイルを作成する

4. 環境設定を使用する

• アプリケーションコード内で環境設定にアクセスして、アプリケーションの動作や外観を制御します。
• 環境設定は angular.json ファイル内の environments セクションで定義します。
• ng serve コマンドでアプリケーションをローカルサーバーで実行します。

• 環境設定を管理するツールやライブラリも存在します。
• 複数の環境設定を作成して、異なる開発や本番環境に対応できます。

環境設定ファイル (angular.json) の例

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "your-project-name": {
      "projectType": "application",
      "   root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "opti   ons": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsconfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "script   s": []
          },
          "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": tru   e
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-project-name:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "your-project-name:build:production   "
            }
          }
        }
      }
    }
  },
  "defaultProject": "your-project-name"
}

環境設定ファイル (environment.ts) の例

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://your-api.com'
};

アプリケーションコードでの環境設定の使用例

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppCompo   nent {
  title = 'My Angular App';
  apiUrl = environment.apiUrl;
}

ng serve コマンドでの環境設定の使用例

ng serve --configuration production

ガイド

1. 環境設定ファイルを作成する
   environments フォルダーに environment.ts と environment.prod.ts ファイルを作成し、それぞれの環境の設定を定義します。
2. アプリケーションコードで環境設定を使用する
   environment をインポートして、アプリケーションのコード内で環境設定にアクセスします。
3. ng serve コマンドで環境を設定する
   --configuration オプションを使用して、使用する環境を指定します。

• angular.json ファイル内の fileReplacements オプションを使用して、環境ごとのファイル置換を行うことができます。

環境変数を使用する

• アプリケーションコードで環境変数にアクセスする
  

  // environment.ts
  export const environment = {
    production: process.env.NODE_ENV === 'production'
  };
  

• 環境変数を設定する
  

  export NODE_ENV=production
  

angular-environment ライブラリを使用する

• アプリケーションコードで環境設定を使用する
  

  // app.module.ts
  import { EnvironmentProvider } from 'angular-environment';
  
  @NgModule({
    // ...
    providers: [
      EnvironmentProvider.forRoot(environment)
    ]
  })
  export class AppModule { }
  

• ライブラリをインストールする
  

  npm install angular-environment
  

angular-cli の --configuration オプションを使用する

• ng serve コマンドで環境を設定する
  

  ng serve --configuration production
  

• angular.json ファイルで環境設定を定義する
  

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

• angular.json ファイルで環境設定を定義する
  

  "configurations": {
    "development": {
      "environment": "dev"
    },
    "production": {
      "environment": "prod"
    }
  }
  

• ng serve コマンドで環境を設定する
  

  ng serve --output-hashing all