【Angular】angular-cliでstaging環境用にビルド出来るようにする【v8.x】

angular-cliではng buildにてdevelop用、ng build --prodにてproduction用のビルドが可能です。

今回は更に、独自で定義したstaging用のビルド処理を行えるように拡張します。

目次

ステージング環境用設定ファイルenvironment.stg.tsを作成

angular-cliにて作成されたプロジェクトのsrc/environments/ディレクトリ内に、ステージング環境用の設定ファイルを追加します。
　
例）

• src/environments/environment.stg.ts

export const environment = {
  production: false,
  staging: true
};

angular.jsonを修正

プロジェクトのルートに配置されているangular.jsonを修正します。
　

{APP_NAME}.architect.build.configurationsにstgを追加

"configurations": {
    "production": {
        ...
    },
    "stg": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.stg.ts"
            }
        ],
        "optimization": true,
        "outputHashing": "all",
        "sourceMap": false,
        "extractCss": true,
        "namedChunks": false,
        "aot": true,
        "extractLicenses": true,
        "vendorChunk": false,
        "buildOptimizer": true
    }
}

productionの項目に続けて、stgの項目を追加します。
各オプションの有効化、無効化はproduction環境の設定を参考に適宜切り替えて下さい。

{APP_NAME}.architect.serve.configurationsにstg`を追加

"configurations": {
    "production": {
        ...
    },
    "stg": {
        "browserTarget": "your-app-name:build:stg"
    }
}

productionの項目に続けて、stgの項目を追加します。
　

ビルドを実行する

独自で定義したstg用設定を有効化してビルドを行う場合、下記コマンドを実行します。

ng build -c stg

　
またstg用設定を用いてserveコマンド実行したい場合、下記コマンドを実行すればOKです。

ng serve -c stg