1

My goal is to use the same angular build in multiple environments(dev,qa,prod). In my code I'm accessing a few rest api`s. As you can already understand, the hostname in the url is different between the environments..

I have seen multiple solution online and I got a question regarding one specific solution that is described in the following article : Host configurations as assets — mount configuration files per environment :

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {shareReplay} from 'rxjs/operators';

interface Configuration {
  resourceServerA: string;
  resourceServerB: string;
  stage: string;
}

@Injectable({providedIn: 'root'})
export class ConfigAssetLoaderService {

  private readonly CONFIG_URL = 'assets/config/config.json';
  private configuration$: Observable<Configuration>;

  constructor(private http: HttpClient) {
  }

  public loadConfigurations(): any {
    if (!this.configuration$) {
      this.configuration$ = this.http.get<Configuration>(this.CONFIG_URL).pipe(
        shareReplay(1)
      );
    }
    return this.configuration$;
  }

}

Lets assume that I used this solution and there is a dedicated service that loads the config.json file from the filesystem. I deployed a docker image of my app into a docker container (with nginx). When the app starts I load a file from filesystem right ? Well this is the part that I'm missing. My app is a frontend app, so wouldnt the service run on the customers browser try to load the config file from the customers side ?

Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
JeyJ
  • 3,582
  • 4
  • 35
  • 83
  • The browser cannot load files from the client file system. An http call to `assets/config/config.json` will be on whatever URL your app is at, so if your browser is loading the app at `https://myangularapp.com` it will go to `https://myangularapp.com/assets/config/config.json` to retrieve your file. – cjd82187 Aug 26 '20 at 17:08
  • @cjd82187 so basically, If I load my api`s urls from a file via http call in order to support working in multiple environments I just need to replace the config.json on the server side ? – JeyJ Aug 26 '20 at 18:08
  • Correct. At work, we update that config.json file via our deployment server when it deploys. – cjd82187 Aug 26 '20 at 20:04
  • and u also load it via a dedicated service that loads the config.json on app start? – JeyJ Aug 27 '20 at 06:52
  • Yes, because its an async call you need to check that its there in anything that asks for it. There's a more advanced way with Angular's `APP_INITIALIZER` that can run async code before it bootstraps the app, but I haven't tried that yet. https://stackoverflow.com/questions/49707830/angular-how-to-correctly-implement-app-initializer – cjd82187 Aug 28 '20 at 12:03

0 Answers0