Angular Environments configuration with load from .json file
Create one app-config.json file
src/assets/
{
"apiUrl": "https://thread-frost-buffet.glitch.me/"
}
Create one .ts file
src/app/
app-config.ts
src/app/
app-config.ts
export class AppConfig {
apiUrl: string="";
}
All Environment.ts paste code
export const defaultEnv = {
production: false,
apiUrl: "https://thread-frost-buffet.glitch.me/"
};
class Environment {
public apiUrl = "";
public production: boolean;
constructor() {
this.production = false;
}
setEnvironment(val:any) {
this.apiUrl = val;
}
}
export const environment = new Environment();
Open app.module.ts
app.component.ts
export function initializerFn(appService :AppService){
return () =>{
return appService.init();
}
}
providers: [{
provide: AppConfig,
deps: [AppService],
useExisting: AppService
},{
provide:APP_INITIALIZER,
multi:true,
deps:[AppService],
useFactory:initializerFn
}],
import { APP_INITIALIZER, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from "@angular/common/http";
import { AppConfig } from './app-config';
import { AppService } from './app.service';
export function initializerFn(appService :AppService){
return () =>{
return appService.init();
}
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
],
providers: [{
provide: AppConfig,
deps: [AppService],
useExisting: AppService
},{
provide:APP_INITIALIZER,
multi:true,
deps:[AppService],
useFactory:initializerFn
}],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'jsonenv';
constructor(private appService: AppService){
appService.get().subscribe((data) => {
console.log(data.json);
});
}
}
Create one appService.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { AppConfig } from './app-config';
@Injectable({
providedIn: 'root'
})
export class AppService extends AppConfig {
constructor(private httpClient: HttpClient) {
super();
}
get(): Observable<any> {
const baseUrl = environment.apiUrl + "find?id=626a8a0ec5ea2000a34fd4cc";
return this.httpClient.get(baseUrl);
}
public init() {
return this.httpClient.get<AppConfig>("/assets/app-config.json").toPromise().then(data => {
if(data!=undefined){
this.apiUrl = data.apiUrl;
}
environment.setEnvironment(data?.apiUrl);
}).catch(() => {
console.error('could not load configuration');
})
}
}
0 Comments