I usually do “.environment.ts” files to set environments. When i build the code I do 3 builds those are dev, test and production. Single build is not possible for all environments i did two approaches to set environments. I will explain both here.
Method 1:
If you know your Test, Dev and production URLs before build you use this method. This is Static one. First Create a project using below command.
ng new dynamic-envs
Go to newly created project and Create a static service using below command
ng g s services/env1
Then Identify the current url and set your environment according to that.
import { Injectable } from '@angular/core';
import {PlatformLocation } from '@angular/common';
@Injectable({
providedIn: 'root'
})
export class Env1Service {
constructor(public platformLocation: PlatformLocation) { }
getEnv() {
/** Identify current url */
const currentURL = (this.platformLocation as any).location.origin;
/** set envronment default dev */
let envs = {apiURL: 'http://dev.com', mode: 'dev'};
/** I assumed my current url is related to test I set my Test envronments. Do for production also same */
if (currentURL === 'http://localhost:4001') {
envs.apiURL = 'http://test.com',
envs.mode = 'Test';
} else if (currentURL === 'http://localhost:4002') {
envs.apiURL = 'http://prod.com',
envs.mode = 'Production';
}
return envs;
}
}
Inject this service what ever you want and use “getEnv()” function for identify the environment.
export class AppComponent implements OnInit {
title = 'dynamic-envs';
apiURL1: string;
mode1: string;
constructor(private env1: Env1Service) { }
ngOnInit() {
/* First Method */
const getData = this.env1.getEnv();
this.apiURL1 = getData.apiURL;
this.mode1 = getData.mode;
}
}
Method 2:
This is little bit complex but dynamic one. First you Create “envronments.json” file in assets file.
{
“apiURL”: “http://dev.com”,
“mode”: “Development”
}
Create a service using below command
ng g s services/env2
Load Environment Variables from Json File
import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {shareReplay} from 'rxjs/operators';
interface Envronment {
apiURL: string;
mode: string;
}
@Injectable({
providedIn: 'root'
})
export class Env2Service {
private readonly ENV_URL = 'assets/envronments.json';
public Envronment$: Observable<Envronment>;
constructor(private http: HttpClient) {
}
public loadEnvronments(): any {
if (!this.Envronment$) {
this.Envronment$ = this.http.get<Envronment>(this.ENV_URL).pipe(
shareReplay(1)
);
}
return this.Envronment$;
}
}
Initialize this service in app.module.ts file
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { Env1Service } from './services/env1.service';
import { Env2Service } from './services/env2.service';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule
],
providers: [
Env1Service,
{
provide: APP_INITIALIZER,
useFactory: (Env2Service: Env2Service) => () => Env2Service.loadEnvronments().toPromise(),
deps: [Env2Service],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule { }
Use this service like below.
import { Component, OnInit } from '@angular/core';
import { Env1Service } from './services/env1.service';
import { Env2Service } from './services/env2.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'dynamic-envs';
apiURL1: string;
mode1: string;
apiURL2: string;
mode2: string;
constructor(private env1: Env1Service, private env2: Env2Service) { }
ngOnInit() {
/* First Method */
const getData = this.env1.getEnv();
this.apiURL1 = getData.apiURL;
this.mode1 = getData.mode;
/* second Method */
this.env2.Envronment$.subscribe(res => {
this.apiURL2 = res.apiURL;
this.mode2 = res.mode;
});
}
}
After build you change your “envronments.json” file according to your environment.
