Question

《 Angular Workspace配置指南》的Build Config Section讨论了如何在同一应用程序中管理各种配置。

对于我来说，我决定为每个客户创建一个配置：

// angular.json excerpt
"architect": {
    "build": {
        "configurations": {
            "customer-1": {
                "fileReplacements": [
                    {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.customer-1.ts"
                    }
                ]
            },
            "customer-2": {
                "fileReplacements": [
                    {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.customer-2.ts"
                    }
                ]
            },
        }
    },
    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "configurations": {
            "customer-1": {
                "browserTarget": "my-app:build:customer-1"
            },
            "customer-2": {
                "browserTarget": "my-app:build:customer-2"
            },
}

我使用环境文件来管理各种特定于客户的设置和一个production标志：

// environment.customer-1.ts excerpt
const environment = {
  production: true,
  customer: "Customer 1",
};


// environment.customer-2.ts excerpt
const environment = {
  production: true,
  customer: "Customer 2",
};

最后，我需要一种方法来确定应用程序是使用ng serve还是ng build命令启动的，以便在应用程序模块中导入一些模拟的提供程序。

我尝试使用environment.production标志，但显然总是这样：

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

@NgModule({
  providers: [
    environment.production // is always true since I've set the flag in all customer-specific environment.ts files
       ? []
       : nonProductionProviders,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

我想出的唯一支持此方案的方法是创建单独的environment.ts文件以及匹配的配置，例如

/src/environment.customer-1-dev.ts
/src/environment.customer-1-prod.ts

// angular.json excerpt
"architect": {
    "build": {
        "configurations": {
            "customer-1-dev": {
                "fileReplacements": [
                    {
                    "replace": "src/environments/environment.ts",
                    "with": "src/environments/environment.customer-1-dev.ts"
                    }
                ]
            },
            // etc.

有更好的方法吗？传递附加标志或至少具有扩展配置的能力将是不错的选择。

Answer 1

我认为您目前拥有的是最好的方法。环境文件用于在编译时就已经知道的配置，这正是您的情况

您还可以使用脚本在运行src/environments/environment.customer-XX.ts之前修改ng serve文件中的值，但是您有冒险将修改后的文件错误地提交到git上。

您还可能具有一些动态json配置（在构建后进行了修改），您可以在引导应用程序之前通过http调用进行检索，以查看是否使用了构建或服务，但对于您的情况而言可能会显得过大。

当前无法从angular.json文件扩展配置。这个feature request可能会令很多人满意，但我认为它尚未得到解决。

不同客户配置的开发/生产环境

1 个答案: