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

我正在尝试将单独的配置文件导入/合并到环境文件中，以提供一个具有适用于当前环境的所有正确属性的全局配置对象

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
  }
};

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

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

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

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 }
};

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 }
};

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

config/dev.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
  }
};

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

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

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

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 }
};

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 }
};

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

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

那么，

环境.prod.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
  }
};

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

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

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

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 }
};

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 }
};

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

环境。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
  }
};

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

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

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

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 }
};

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 }
};

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

环境.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
  }
};

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

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

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

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 }
};

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 }
};

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

接下来，在我的app.module.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
  }
};

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

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

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

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 }
};

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 }
};

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，这会覆盖

config/production.ts

中的“ServiceWorker”对象

事实上，即使我在所有配置中设置了

serviceWorker:{enabled:false}

，无论我在构建时使用

--env

标志设置了什么环境，我都会启用serviceWorker

此外，如果我在运行时检查其他

environment.CONFIG

属性（如

environment.CONFIG.apidendpoint

或

environment.CONFIG.cookieDomain

），它们就是我所期望的，基于我在构建时使用

--env

标志指定的环境。 我不知道我错过了什么？如果CLI在构建时根据

--env

标志选择了正确的环境文件，为什么正确合并的

环境.CONFIG

对象在构建时不存在？ 如果我直接在环境文件中移动serviceWorker配置属性，它就会工作。但关键是要将它与其他配置属性一起放在我的配置文件中，这些配置文件会合并到环境文件中

此设置的要点是，应用程序可能有很多配置属性，但在不同的环境中可能只有少数属性不同。我不想在每个环境文件中都写入它们

---

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

这里提供了一个解决方案

环境.base.ts

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

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

export const environment = {
  ...base,
}

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

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

环境。ts

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

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

export const environment = {
  ...base,
}

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

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

环境.产品ts

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

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

export const environment = {
  ...base,
}

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

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