In my project I have 3 environment files (dev, staging, production). And I want to change the them for each dist folder (when deploying to dev I need the envi dev link to take the data from.. same for staging and prod) The files contains these

export const environment = {
  production: true,
  hmr: false,
  backend: false,
  staging: false,
  apiKey: 'prodKey',
  API_URL: "my backend link"
};

Of course the production is false in dev and staging envs.. I also added in angular.json this (same for staging)

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ],
              "outputPath": "dist/production"
            },

But when I do build I usually commment a file and use the other to do build and deploy as here in my api file

import { environment } from 'src/environments/environment';

// import { environment } from "src//environments/environment.stage";
// import { environment } from "src//environments/environment.prod";

const API_URL = environment.API_URL;

commmands are: ng build and ng build --configuration=staging and ng build --prod

But I dont want to keep commenting the API envir.. as above, I want it to change automatically after I do build and change in dist files for each environment so I can deploy normally to git and do normal pipeline.

Any idea? Thanks

推荐答案

Leave all imports as

import { environment } from 'src/environments/environment';

Extend the configurations object in angular.json

extending the configurations object:

... // angular.json
configurations": {
    "production" {...} // leave as it is,
    "dev": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.dev.ts"
            }
        ]
    },
    "staging": {
        "fileReplacements": [
            {
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.staging.ts"
            }
        ]
    }
}

Angular相关问答推荐

在forkjoin中使用NGXS状态数据

Angular中的Bootstrap carousel动态属性

如何在ANGLING v17中使用鞋带样式组件?

NG-Zorro Datepicker 手动输入掩码不起作用

如何正确导出/导入枚举和接口文件以便 Jest 成功完成测试?

Angular MSAL - 对 Bearer 令牌和 AUD 属性的怀疑

iss 声明无效 Keycloak

Angular:显示带有嵌套子项的内容投影

过滤 ngfor Angular 的计数

关闭 Dynamsoft Web Twain 弹出窗口

ngx-bootstrap modal:如何从模态中获取返回值?

如何在 Angular Cli 中生成 .angular-cli.json 文件?

如何使用Angular4通过元素ID设置焦点

即使 withCredentials 为真,Angular 也不会发送在 Set-Cookie 中收到的 Cookie

Angular 7 测试:NullInjectorError:No provider for ActivatedRoute

未绑定断点 - VS Code | Chrome | Angular

Angular 4 material表突出显示一行

包 '@angular/cli' 不是依赖项

Angular2/4 中的ng-reflect-*属性有什么作用?

构建和服务有什么区别?