应用环境变量配置
应用环境
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
里面的值