合并环境文件中的不同配置文件

时间:2018-03-06 14:29:15

标签: angular typescript merge angular-cli configuration-files

我尝试使用单独的配置文件导入/合并到环境文件中,以提供另一个全局CONFIG对象,其中包含适用于当前环境的所有正确属性。

config/production.ts:

export const APP_CONFIG = {
  api: {
    root: 'https://api.example.com'
  },
  cookie: {
    domain: '.example.com'
  },
  serviceWorker: {
    enabled: true
  }
  // ... many more more properties
};

config/local.ts

export const APP_CONFIG = {
  // ... only properties that are different from production
  api: {
    root: 'http://api.example.local'
  },
  cookie: {
    domain: '.example.local'
  },
  serviceWorker: {
    enabled: false
  }
};

config/dev.ts

export const APP_CONFIG = {
  // ... only properties that are different from production
  api: {
    root: 'http://localhost:8001'
  },
  cookie: {
    domain: 'localhost'
  }
};

还有一个测试环境的配置文件。

然后, 的 environment.prod.ts

import { APP_CONFIG } from '../config/production';

export const environment = {
  production: true,
  CONFIG: APP_CONFIG
};

environment.ts

import { APP_CONFIG as CONF_PROD } from '../config/production';
import { APP_CONFIG as CONF_DEV } from '../config/dev';

export const environment = {
  production: true,
  CONFIG: { ...CONF_PROD, ...CONF_DEV }
};

environment.local.ts

import { APP_CONFIG as CONF_PROD } from '../config/production';
import { APP_CONFIG as CONF_LOCAL } from '../config/local';

export const environment = {
  production: true,
  CONFIG: { ...CONF_PROD, ...CONF_LOCAL }
};

接下来,在我的 app.module.ts

ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production && environment.CONFIG.serviceWorker.enabled })

这样只有在满足两个条件时才启用服务工作者:a)它是生产版本(environment.production: true,不要误认为我构建的环境)和b)我实际上想要服务在该环境中启用的工作人员(CONFIG.serviceWorker.enabled)。

当然,在我的.angular-cli.json中我告诉他们:

"environments": {
  "dev": "environments/environment.ts",
  "local": "environments/environment.local.ts",
  "test": "environments/environment.test.ts",
  "prod": "environments/environment.prod.ts"
}

如果我ng build --prod --env=local我仍然在我的应用中启用了ServiceWorker,虽然我在config/local.ts中将其设置为false,这会覆盖" serviceWorker" config/production.ts中的对象。

事实上,即使我在所有配置中设置serviceWorker: { enabled: false },无论我在构建时使用--env标志设置什么环境,我总是启用ServiceWorker。

另外,如果我在运行时检查其他environment.CONFIG属性(如environment.CONFIG.apiEndpointenvironment.CONFIG.cookieDomain),那么它们就是我期望的属性,基于我用{指定的环境}建筑时{1}}标志。 我不知道我在这里失踪了什么?如果CLI在构建时选择了正确的环境文件,基于--env标志,为什么在构建时也没有正确合并的--env对象? 如果我直接在我的环境文件中移动serviceWorker配置属性,它就可以工作。但重点是将其与配置属性的其余部分一起放在我的配置文件中,这些文件将合并到环境文件中。

此设置的重点是应用程序可能有很多配置属性,但只有少数可能因环境而异。我不想在每个环境文件中写下所有这些内容。

因此,让生产配置具有所有属性是有意义的,然后在每个其他环境(dev / local,test)的配置中只有与生产不同的属性,因此它们可以是合并,因此当前环境属性将由生产配置组成,其中一些配置属性被当前环境的配置覆盖。

1 个答案:

答案 0 :(得分:0)

此处提供了一种解决方案,https://github.com/angular/angular-cli/issues/12190

environment.base.ts

export const environment = {
  production: false,
  foo: "bar"
}

environment.ts

import { environment as base } from "./environment.base";

export const environment = {
  ...base,
}

environment.prod.ts

import { environment as base } from "./environment.base";

export const environment = {
  ...base,
  production: true
}