加载外部属性文件angular 2+

Question

我想知道Angular 2+中是否可以在某个外部config.json文件中使用我的api网址，并在构建之前加载它们。我之所以这么问，是因为在目前的情况下，我只是将它们定义为服务中的变量，如果要更改URL，必须手动更改代码并重新构建。有了这个配置文件，我正在考虑在那里定义它们，以便如果更改配置属性，则不必每次都重新构建代码。

Answer 1

新的 angular-cli 具有不同环境的概念，如开发 (dev) 和生产 (prod)。

使用 cli ng my-app 创建新应用程序时，/environments 文件夹是包含环境文件的脚手架的一部分。

??? environment.ts
??? environment.prod.ts

在构建 (ng build) 或提供 (ng serve) 应用程序时，会拉取 /environments 中的 environment.{env}.ts 文件并替换 /src/app 中的文件。默认情况下，这是开发人员。

为了获取生产版本，请使用以下命令将环境设置为生产：

#build
$ ng build --environment=production
#shorthand
$ ng b -prod

#serve
$ ng serve --environment=production
#shorthand
$ ng s -prod

示例环境文件

export const environment = {  
  production: false,
  envName: 'qa'
};

在此处阅读有关 ng build 命令的更多信息

例子

export const environment = {  
  production: false,
  apiUrl: 'http://example.com/api'
};

应用组件

import { Component } from '@angular/core';  
import { environment } from './environment';

@Component({
  moduleId: module.id,
  selector: 'myapp-app',
  templateUrl: 'myapp.component.html',
  styleUrls: ['myapp.component.css']
})
export class MyappAppComponent {  
  title = 'myapp works!';
  environmentName = environment.apiUrl;
}

模板

<h1>  
  {{title}}
</h1>

<h2>  
  {{environmentName}}
</h2>