Question

我的Angular应用程序有几个环境文件：

environment.ts
environment.dev.ts
environment.prod.ts

我想使用所有环境共享的默认变量，而不在每个文件中都复制它们。例如，如果仅在 environment.ts 中添加变量“ homeUrl”：

export const environment = {
  production: false,
  apiUrl: 'http://some-backend-url/',
  homeUrl: '/illustrator/directory'
};

当我使用dev配置运行应用程序时，我 environment.dev.ts 中的变量已正确加载，但homeUrl未定义，因为它仅在 environment.ts 中声明文件。

是否可以使用环境之间共享的默认变量而不复制它们？

Answer 1

您可以从外部导入默认变量。

default.ts：

export const default = {
  apiUrl: 'http://some-backend-url/',
  homeUrl: '/illustrator/directory'
}

在environment.ts中：

import {default} from 'default'

export const environment = {
  ...default,
  production: false
}

并将其导入所有文件。因此，您只能在default.ts文件中进行修改，并且会自动在所有环境中应用

Answer 2

除了对象分发/分配外，您还可以将环境配置声明为一个类，每个类都继承自您的“基础”类。

// environment.ts
export class environment {
  static value = 'DefaultValue';
  static homeUrl = 'DefaultUrl';
}

然后在您的其他环境配置中...

// environment.dev.ts, environment.prod.ts...
import { environment as EnvironmentBase } from './environment';

export class environment extends EnvironmentBase {
  static newThing = '??';
  static homeUrl = 'NewUrl'; // overridden
}

需要注意的事情：这些现在是类而不是对象文字，因此它们的属性应该是静态的以匹配访问。另外，您需要将基本配置导入为其他名称，因为您要在该文件中定义一个具有相同名称的类（或仅创建一个单独的基本类）/

Answer 3

我的答案会改善Oleg answer：

1。基本界面：

// config.ts
export interface Config {
   production: boolean;
   apiUrl: string;
   homeUrl: string;
   // added other need config definition.
}

2。基本环境：

// environment.base.ts
export const environmentBase = {
  apiUrl: 'http://some-backend-url/',
  homeUrl: '/illustrator/directory'
  // add more base, default, share config definitions.
}

3。生产环境：

// environment.prod.ts
export const environment: Config = {
    ...environmentBase,
  production: true,
}

4。开发环境：

// environment.dev.ts
export const environment: Config = {
    ...environmentBase,
  production: false,
}

如何在Angular环境中使用默认值

3 个答案: