应用环境

Configuring available environments

配置环境变量

.angular-cli.json contains an environments section. By default, this looks like:
.angular-cli.json 包含一个 environments 选项. 默认像下面:

"environments": {
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
}

You can add additional environments as required. To add a staging environment, your configuration would look like:
你能增加附加的环境变量和请求. 增加一个 staging 变量, 你的配置将像下面:

"environments": {
    "dev": "environments/environment.ts",
    "staging": "environments/environment.staging.ts",
    "prod": "environments/environment.prod.ts"
}

Adding environment-specific files

添加环境特征文件

The environment-specific files are set out as shown below:
环境特定的文件设置如下所示:

└── src
    └── environments
        ├── environment.prod.ts
        └── environment.ts

If you wanted to add another environment for staging, your file structure would become:
如果你想为 staging 添加另一个环境, 你的文件结构将变成：

└── src
    └── environments
        ├── environment.prod.ts
        ├── environment.staging.ts
        └── environment.ts

Amending environment-specific files

改良环境特征文件

environment.ts contains the default settings. If you take a look at this file, it should look like:
environment.ts 包含默认设置. 加入你看这个文件, 它应该像下面:

export const environment = {
  production: false
};

If you compare this to environment.prod.ts, which looks like:
假如你比较这个 environment.prod.ts, 这看起来像:

export const environment = {
  production: true
};

You can add further variables, either as additional properties on the environment object, or as separate objects, for example:
你能添加更多的变量，还能附加属性在 enviroment 对象，或者分离对象， 列如：

export const environment = {
  production: false,
  apiUrl: 'http://my-api-url'
};

Using environment-specific variables in your application

使用环境特征变量在你的应用

Given the following application structure:
已知下面的应用架构:

└── src
    └── app
        ├── app.component.html
        └── app.component.ts
    └── environments
        ├── environment.prod.ts
        ├── environment.staging.ts
        └── environment.ts

Using environment variables inside of app.component.ts might look something like this:
使用环境变量在 app.component.ts 里面，可能看起来这样

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    console.log(environment.production); // Logs false for default environment
  }
  title = 'app works!';
}

Environment-specific builds

环境特征构建

Running:
运行:

ng build

Will use the defaults found in environment.ts
将使用 environment.ts 里面默认的找到的

运行:

ng build --env=staging

将使用 environment.staging.ts 里面的值