Angular Environments configuration with load from .json file


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

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

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');
    })
  }
}