Need to use different values depending on the environment you’re in? If you’re building an app that needs to use API host URLs depending on the environment, you may do it easily in Angular using the environmen.ts
file.
We are considering Angular 8+ apps for this article.
Angular CLI projects already use a production environment variable to enable production mode when in the production environment at main.ts
:
if (environment.production) {
enableProdMode();
}
And you'll also notice that by default in the src/environment
folder you have an environment file for development and one for production. Let's use this feature to allow us to use different API host URL depending on if we're in development or production mode:
environment.ts
:
export const environment = {
production: false,
apiHost: https://api.local.com
}
environment.prod.ts
:
export const environment = {
production: true,
apiHost: https://api.production-url.com
};
And in our app.component.ts
all we have to do in order to access the variable is the following:
import { Component } from '@angular/core';
import { environment } from '../environments/environment';
@Component({ ... })
export class AppComponent {
apiHost: string = environment.apiHost;
}
Now in development mode the apiHost variable resolves to https://api.local.com
and in production resolves to https://api.production-url.com
. You may run ng build --prod
and check.
Detecting Development Mode
Angular also provides us with a utility function called isDevMode
that makes it easy to check if the app is running in dev mode:
import { Component, OnInit, isDevMode } from '@angular/core';
@Component({ ... })
export class AppComponent implements OnInit {
ngOnInit() {
if (isDevMode()) {
console.log('Development!');
} else {
console.log('Cool. Production!');
}
}
}
Adding a Staging Environment
To add a new environment in Angular projects a new entry to configuration
property should be added at angular.json
file. Let's add a staging environment for example. Note that production
property already exists.
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
},
"stating": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.stating.ts"
}
]
}
And now we can add a staging environment file and suddenly be and build the project with ng build --configuration=staging
on our CI (or deploy process) to deploy on staging environment:
environment.staging.ts
export const environment = {
production: false,
apiHost: https://staging.host.com
};
Top comments (0)