使用构建过程中生成的属性文件非常简单。这就是Angular CLI使用的方法。为每个环境定义一个属性文件，并在构建期间使用命令来确定将哪个文件复制到应用程序中。然后简单地导入属性文件来使用。

https://github.com/angular/angular-cli#build-targets-and-environment-files

使用构建过程中生成的属性文件非常简单。这就是Angular CLI使用的方法。为每个环境定义一个属性文件，并在构建期间使用命令来确定将哪个文件复制到应用程序中。然后简单地导入属性文件来使用。

https://github.com/angular/angular-cli#build-targets-and-environment-files

AngularJS的模块。Constant不能定义标准意义上的常数。

虽然它是一个独立的提供者注册机制，但是最好在相关模块的上下文中理解它。Value ($ provider . Value)函数。官方文档清楚地陈述了用例:

用$injector注册一个值服务，比如一个字符串、一个数字、一个数组、一个对象或一个函数。这是注册服务的缩写，其中其提供者的$get属性是一个不接受参数并返回值服务的工厂函数。这也意味着不可能将其他服务注入到价值服务中。

将其与模块的文档进行比较。常量($ provider . Constant)，它也清楚地说明了用例(强调我的):

用$injector注册一个常量服务，比如一个字符串、一个数字、一个数组、一个对象或一个函数。与值一样，不可能将其他服务注入到常量中。 但与value不同的是，常量可以被注入到模块的配置函数中(参见angular.Module)，而且它不能被AngularJS的装饰器覆盖。

因此，AngularJS的constant函数并没有在这个领域中提供一个通常理解的常量。

也就是说，对所提供的对象施加的限制，以及它之前通过$注入器的可用性，清楚地表明该名称是类推使用的。

如果你想在AngularJS应用程序中有一个实际的常量，你可以像在任何JavaScript程序中一样“提供”一个

export const π = 3.14159265;

在Angular 2中，同样的技术也适用。

Angular 2应用程序没有AngularJS应用程序那样的配置阶段。此外，没有服务装饰器机制(AngularJS decorator)，但考虑到它们彼此之间的差异，这并不特别令人惊讶。

例如

angular
  .module('mainApp.config', [])
  .constant('API_ENDPOINT', 'http://127.0.0.1:6666/api/');

是模糊任意的，有点令人讨厌，因为$ provider。Constant被用来指定一个对象，这个对象碰巧也是一个常量。你还不如写信算了

export const apiEndpoint = 'http://127.0.0.1:6666/api/';

因为任何一方都可以改变。

现在关于可测性的争论，嘲笑常数，被削弱了，因为它字面上是不变的。

不模拟π。

当然，您的应用程序特定的语义可能是您的端点可能会更改，或者您的API可能具有非透明的故障转移机制，因此API端点在某些情况下更改是合理的。

但在这种情况下，将其作为单个URL的字符串文字表示提供给常量函数是行不通的。

一个更好的参数，可能更符合AngularJS $ provider存在的原因。常量函数是，当AngularJS被引入时，JavaScript还没有标准的模块概念。在这种情况下，全局变量将用于共享可变或不可变的值，使用全局变量是有问题的。

也就是说，通过框架提供这样的东西可以增加与该框架的耦合。它还将特定于Angular的逻辑与适用于任何其他系统的逻辑混合在一起。

这并不是说这是一种错误或有害的方法，但就我个人而言，如果我想在Angular 2应用程序中使用常量，我会写

export const π = 3.14159265;

就像我使用AngularJS一样。

事情改变得越多……

angular团队提供的配置解决方案可以在这里找到。

以下是所有相关代码:

1) app.config.ts

import { OpaqueToken } from "@angular/core";

export let APP_CONFIG = new OpaqueToken("app.config");

export interface IAppConfig {
    apiEndpoint: string;
}

export const AppConfig: IAppConfig = {    
    apiEndpoint: "http://localhost:15422/api/"    
};

2) app.module.ts

import { APP_CONFIG, AppConfig } from './app.config';

@NgModule({
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ]
})

3) your.service.ts

import { APP_CONFIG, IAppConfig } from './app.config';

@Injectable()
export class YourService {

    constructor(@Inject(APP_CONFIG) private config: IAppConfig) {
             // You can use config.apiEndpoint now
    }   
}

现在您可以在任何地方注入配置，而无需使用字符串名称，并使用您的接口进行静态检查。

当然，您可以进一步分离接口和常数，以便在生产和开发中提供不同的值。

在阅读了这个帖子和其他一些帖子的所有答案后，我想提供我这些天正在使用的解决方案。

首先，我必须为环境添加一个类。这样，我就实现了属性的数据类型，因此使用起来很容易。此外，我还可以将默认数据绑定到我的环境，这样我就可以在所有环境之间共享公共数据。有时我们有一些在所有环境中具有相同值的变量(例如站点名称)，并且我们不希望每次都更改到所有环境。

// environments\ienvironments.ts

export class IEnvironment implements IEnvironmentParams {
  public production: boolean;
  public basicURL: string = 'https://www.someawesomedomain.com';
  public siteName: string = 'My awesome site';

  constructor(params: IEnvironmentParams) {
    this.production = params.production ?? false;
    this.basicURL = params.basicURL ?? this.basicURL;
    this.siteName = params.siteName ?? this.siteName;
  }
}

export interface IEnvironmentParams {
  production: boolean;
  basicURL?: string;
  siteName?: string;
}

注意，我正在使用IEnvironmentParams来简化环境的创建，这样我就可以传递一个对象，而不会弄乱构造函数参数并避免参数顺序问题，还可以使用??操作符。

// environments\environment.prod.ts

import {IEnvironment, IEnvironmentParams} from "./ienvironment";

const params: IEnvironmentParams = {
    production: true
};

export const environment: IEnvironment = new IEnvironment(params);

// environments\environment.ts

import {IEnvironment, IEnvironmentParams} from "./ienvironment";

const params: IEnvironmentParams = {
    production: false
};

export const environment: IEnvironment = new IEnvironment(params);

用法示例

import {environment} from "../environments/environment";


// app-routing.module.ts

const routes: Routes = [
  { 
    path: '', component: HomeComponent,     
    data: {
        title: `${environment.siteName} | Home page title!`,
        description: 'some page description',
    }
  }
];

检查代码完成情况。

// home.component.ts

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent {

  constructor() {
    console.log(`home component constructor - showing evironment.siteName - ${environment.siteName}`);
  }
}

你可以在任何你想要的地方使用它，类、服务、指令、组件等等。

对于那些想知道在构建之后替换值的人。你能做到的。这有点棘手，但当你构建一个Angular应用时，环境数据会被导出到main.js中，看看下面的截图。

只需在任何IDE中打开文件并找到环境，然后只需替换数据。

关于Angular Universal项目。当Angular Universal项目构建完成时，它会导出两个main.js，一个用于服务器，一个用于浏览器，所以你必须同时修改两个。

只需使用Typescript常量

export var API_ENDPOINT = 'http://127.0.0.1:6666/api/';

你可以在依赖注入器中使用

bootstrap(AppComponent, [provide(API_ENDPOINT, {useValue: 'http://127.0.0.1:6666/api/'}), ...]);