Angular扩展运算符问题：重写环境变量时避免代码重复

你可以通过嵌套对象展开的方式，在各个环境文件中继承commonEnv里的公共配置，只覆盖需要修改的baseUrl字段，不用重复写不变的tests。

修改后的环境文件示例 #

1. environment.dev.ts（预发布/开发环境同理）

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

export const environment = {
  type: 'dev',
  service: {
    myAPI: {
      // 先复用commonEnv里myAPI的所有公共配置
      ...commonEnv.myAPI,
      // 仅覆盖当前环境专属的baseUrl
      baseUrl: 'https://myapi.com'
    }
  }
};

2. environment.prod.ts（生产环境）

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

export const environment = {
  type: 'prod',
  service: {
    myAPI: {
      ...commonEnv.myAPI,
      baseUrl: 'https://prod-myapi.com'
    }
  }
};

3. 本地环境environment.ts（可保持原有写法，也可统一用上述方式）

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

export const environment = {
  type: 'loc',
  service: {
    ...commonEnv
  }
};

原理说明 #

ES6的对象展开运算符(...)会把commonEnv.myAPI中的所有键值对（包括tests和默认baseUrl）复制到当前对象中，之后声明的baseUrl会覆盖原有默认值，实现仅修改差异字段、复用公共配置的效果，彻底消除重复代码。

内容的提问来源于stack exchange，提问作者testtt