Angular如何针对不同环境共享json配置文件的相同设置

Question

I have an Angular 9+ application that uses APP_INITILIZER to load the external json configuration file so that we can modify the file without rebuilding the app.

We have a few such configuration files for different environments like dev , qa , staging , etc. And in angular.json file, we specify which file to use in assets section.

We have some settings that are not related to environment. For example, the settings for colour

...
,
{
   "title":"red",
   "header":"blue"
},
...

The issue is each time we add new settings like above, we need to duplicate it in every config file. I wonder if there's a way to only add the common settings once, and reuse them in all other config files?

Answer 1

The approach I usually take is to have a common environment file like environment.common.ts but the file looks slightly different

export const commonEnv = {
  title: 'red',
  header: 'blue'
};

I then just merge the settings with the normal environment file using Object.assign.

import { commonEnv } from "./../environment.common";
import { environment } from './../environments/environment';

const mergedSettings = Object.assign(commonEnv, environment);

You can now use mergedSettings to get to all the settings.