如何指定使用哪个环境在 Angular 6+ 中?.angular-cli.json
文件似乎已经从之前的版本更改为 angular.json
,并且其中的 json
结构也随之改变。
我该在这个文件的哪里指定要使用的环境?
如何指定使用哪个环境在 Angular 6+ 中?.angular-cli.json
文件似乎已经从之前的版本更改为 angular.json
,并且其中的 json
结构也随之改变。
我该在这个文件的哪里指定要使用的环境?
打开angular.json文件。我们可以看到默认情况下的配置将显示为生产环境,添加适用于您不同环境的代码片段。为开发环境添加environment.dev.ts文件,在环境中添加environment.qa.ts文件以用于QA。根据您的喜好进行命名。
ng serve --configuration=environment_name
环境名称 - (开发,质量保证,生产),ng build 可以遵循相同的过程。
"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": true
},
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
"qa": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.qa.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
我尝试在我的 Angular 6 应用程序中添加一个名为 "test" 的新配置,然后运行
ng serve --configuration=test
出现错误,提示项目中找不到配置项“test”。 在angular.json文件中向下查找,在“build”下面还有一个名为“serve”的部分。为了让ng serve正常工作,还需要在“serve”下的配置部分添加新的配置项:
并得到一个错误,说“Configuration 'test' could not be found in project”。在 angular.json 文件中往下找,可以找到“build”下面的另一部分称为“serve”。为了让 ng serve 与其一起工作,还需要将新配置添加到“serve”下的配置部分中:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
},
"test": {
"browserTarget": "my-app:build:test"
}
}
},
angular.json
中来通知 Angular。我们将通过扩展配置对象来实现这一点:... // angular.json
configurations": {
"production" {...} // leave as it is,
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
]
}
}
接下来,需要更新服务对象:
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "<appname>:build"
},
"configurations": {
"production": ... // leave as it is
"dev": {
"browserTarget": "<appname>:build:dev"
}
}
},
在src/environment/
目录下创建一个名为environment.dev.ts
的环境文件。
然后运行以下命令:
ng serve -c=dev
你也可以通过在package.json文件中添加以下代码来创建一个单独运行此环境的命令:
"scripts": {
"start:dev": "ng serve -c=dev --port=4000"
}
}
我们开始吧
npm run start:dev
在 angular.json 中有一个属性可以指定在开发和生产中使用哪个文件,通常情况下,您需要在项目中导入 environment.ts 来获取所需内容。
"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": true
}
}