Question

我想知道在Angular 2+中是否有任何方法我可以在一些外部config.json文件中使用我的api url并在构建之前加载它们。我问这个是因为在我目前的情况下我只是将它们定义为我服务中的变量，如果我想对URL进行更改，我必须手动更改代码并重建。有了这个配置文件，我想在那里定义它们，这样如果我改变配置属性，我就不必每次都重建代码。

Answer 1

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

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

├── environment.ts
├── environment.prod.ts

构建应用程序（ng build）或提供服务（ng serve）时，/ environment中的环境。{env} .ts文件被拉出并替换/ src / app中的文件。默认情况下，这是开发。

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

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

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

示例ENV文件

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

详细了解ng build命令 here

实施例

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

<强> app.component

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>

加载外部属性文件angular 2 +

1 个答案: