# [Angular] Customize Environment

## 使用指令建立 environment.ts

在空專案啟動時，沒有任何環境設定，所以我們可以自己建立一個環境設定檔，並且在專案啟動時使用這個環墋設定檔。
可以使用以下指令建立一個環境設定檔：

$ ng g environment

這樣就會在 src/environments/ 目錄下建立一個 environment.ts 檔案，這個檔案就是我們自己建立的環境設定檔。

接著我們可以複製一份 environment.ts 檔案，並且命名為 environment.local.ts、environment.prod.ts、environment.development.ts，這樣就可以建立不同的環境設定檔。

接著我們可以在 angular.json 中找到`configurations`與`serve`區域，並且設定不同的環境設定檔：

"configurations": {
    "production": {
        "budgets": [
        {
            "type": "initial",
            "maximumWarning": "500kb",
            "maximumError": "1mb"
        },
        {
            "type": "anyComponentStyle",
            "maximumWarning": "2kb",
            "maximumError": "4kb"
        }
        ],
        "outputHashing": "all"
    },
    "local": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true,
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.local.ts"
        }
        ]
    },
    "prod": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true,
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
        }
        ]
    },
    "development": {
        "buildOptimizer": false,
        "optimization": false,
        "vendorChunk": true,
        "extractLicenses": false,
        "sourceMap": true,
        "namedChunks": true,
        "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.development.ts"
        }
        ]
    }
    },
    "defaultConfiguration": "local"
},
"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "configurations": {
    "production": {
        "browserTarget": "assets-overview-platform:build:production"
    },
    "local": {
        "browserTarget": "assets-overview-platform:build:local"
    },
    "prod": {
        "browserTarget": "assets-overview-platform:build:prod"
    },
    "development": {
        "browserTarget": "assets-overview-platform:build:development"
    }
    },
    "defaultConfiguration": "local"
},