mirror of
https://github.com/angular/angular-cli.git
synced 2025-05-18 20:02:40 +08:00
123 lines
2.6 KiB
Markdown
123 lines
2.6 KiB
Markdown
# Application Environments
|
|
|
|
## Configuring available environments
|
|
|
|
`.angular-cli.json` contains an **environments** section. By default, this looks like:
|
|
|
|
``` json
|
|
"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:
|
|
|
|
``` json
|
|
"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:
|
|
|
|
```
|
|
└── 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:
|
|
|
|
``` TypeScript
|
|
export const environment = {
|
|
production: false
|
|
};
|
|
```
|
|
|
|
If you compare this to `environment.prod.ts`, which looks like:
|
|
|
|
``` TypeScript
|
|
export const environment = {
|
|
production: true
|
|
};
|
|
```
|
|
|
|
You can add further variables, either as additional properties on the `environment` object, or as separate objects, for example:
|
|
|
|
``` TypeScript
|
|
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:
|
|
|
|
``` TypeScript
|
|
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`
|
|
|
|
Running:
|
|
|
|
```
|
|
ng build --env=staging
|
|
```
|
|
|
|
Will use the values from `environment.staging.ts`
|