项目在打包发布的时候往往需要配置不同的server的地址，当然，有些同学用的是nginx转发，因此不需要。

但不仅仅局限于请求地址，有可能某些变量密钥等等，比如微信的appid，测试环境和正式环境用的可能是不一致的。

为了方便打包，angular工程化中为开发者做了一些改进。打包时候，引入environment的设计。

请看工程文件目录：

image

注意一下几点：

1 environments中可以配置多套不同的环境

2 默认引入的都是environment.ts，这一点必须一致。

3 修改angular.json

4 打包指定参数 ----configuration=dev

打开配置 angular.json

json中的projects -> 项目名 -> architect -> build -> configurations -> production。增加不同的环境配置，复制比较容易。ng build --prod -c=dev：

"build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "www",
                        "index": "src/index.html",
                        "main": "src/main.ts",
                        "polyfills": "src/polyfills.ts",
                        "tsConfig": "tsconfig.app.json",
                        "assets": [
                            {
                                "glob": "**/*",
                                "input": "src/assets",
                                "output": "assets"
                            },
                            {
                                "glob": "**/*.svg",
                                "input": "node_modules/ionicons/dist/ionicons/svg",
                                "output": "./svg"
                            },
                            "src/manifest.webmanifest"
                        ],
                        "styles": [
                            {
                                "input": "src/theme/variables.scss"
                            },
                            {
                                "input": "src/global.scss"
                            }
                        ],
                        "scripts": []
                    },
                    "configurations": {
                        "dev": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.dev.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ],
                            "serviceWorker": true,
                            "ngswConfigPath": "ngsw-config.json"
                        },
                        "uat": {
                            "fileReplacements": [
                                {
                                    "replace": "src/environments/environment.ts",
                                    "with": "src/environments/environment.uat.ts"
                                }
                            ],
                            "optimization": true,
                            "outputHashing": "all",
                            "sourceMap": false,
                            "extractCss": true,
                            "namedChunks": false,
                            "aot": true,
                            "extractLicenses": true,
                            "vendorChunk": false,
                            "buildOptimizer": true,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ],
                            "serviceWorker": true,
                            "ngswConfigPath": "ngsw-config.json"
                        },
                        "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,
                            "budgets": [
                                {
                                    "type": "initial",
                                    "maximumWarning": "2mb",
                                    "maximumError": "5mb"
                                }
                            ],
                            "serviceWorker": true,
                            "ngswConfigPath": "ngsw-config.json"
                        },
                        "ci": {
                            "progress": false
                        }
                    }
                },

然后设置 json中的projects -> 项目名 -> architect -> serve，这样就可以在ng serve中增加更多的环境配置， ng serve -c=dev

"serve": {

                    "builder": "@angular-devkit/build-angular:dev-server",

                    "options": {

                        "browserTarget": "app:build"

                    },

                    "configurations": {

                        "production": {

                            "browserTarget": "app:build:production"

                        },

                        "uat": {

                            "browserTarget": "app:build:uat"

                        },

                        "dev": {

                            "browserTarget": "app:build:dev"

                        },

                        "ci": {

                            "progress": false

                        }

                    }

                },

是不是很简单呢，有任何问题就在下面留言吧！