Angular 8 - Using HttpClient to Get a json configuration file from assets directory, can't find /assets/config.json when deploying to IIS

Question

I have an Angular project that I am working on. The new requirement is for me to rewrite the ConfigService to read a JSON object from a config.json file located in the assets directory. This code works when using ng serve. However, when I ng-build the app and deploy it via my IIS backend, it gives me a 404 error for http://localhost:1509/assets/config.json. The project is served from a containing folder named "Client". When I modify the resultant main-es2015.js file's ConfigService to Get from /Client/assets/config.json instead, the frontend loads from the config as it should.

How can I rewrite this where the code points to the proper directory for both my test environment and my production environment? I'm not sure if this is something I should change on the frontend or backend.

import { Injectable } from '@angular/core';
import { HttpService } from './http.service';

@Injectable({
  providedIn: 'root'
})

export class ConfigService {

  public appConfig: any;

  constructor(private _http: HttpService) { }

  getConfig(): Promise<boolean> { 
    return new Promise((resolve, reject) => {
      this._http.Get('/assets/config.json')
        .toPromise()
        .then(data => {
          console.log(data);
          this.appConfig = data;
          resolve();
        })
    });
  }

  getBaseUrl() {
    console.log(this.appConfig.baseUrl)
    return new Promise((resolve, reject) => {
      try {
        this._http.baseUrl = this.appConfig.baseUrl;
        resolve();
      }
      catch (error) {
        console.error(error);
        reject();
      }
    });
  }

  loadAll() {
    return new Promise((resolve, reject) => {
      this.getConfig().then(() => {
        this.getBaseUrl().then(() => {
          resolve();
        });
      }).catch(e => {
        throw e;
      });
    });
  }
}

export function configServiceFactory(config: ConfigService) {
  return () => config.loadAll();
}

Right now the config file only contains the base API endpoint.

{ 
    "baseUrl":  "http://localhost:1509/"
}

My the directory my app is deployed from has this structure:

Client (folder)
    assets (folder)
        config.json
    
    index.html
    main-es2015.js
    main-es5.js
    main-es5.js.map
    ...
    ...

Does this answer your question? [How to import .json config to environment.ts and consume api using Angular?](https://stackoverflow.com/questions/55285323/how-to-import-json-config-to-environment-ts-and-consume-api-using-angular) — Leponzo, Oct 16 '21 at 19:53

score 0 · Answer 1 · answered Sep 18 '20 at 19:07

I suppose one solution could be to write a fall back into getConfig method if it fails. But that definitely seems like the improper way to solve this.

  getConfig(): Promise<boolean> { 
    return new Promise((resolve, reject) => {
      this._http.Get('/assets/config.json')
        .toPromise()
        .then(data => {
          console.log(data);
          this.appConfig = data;
          resolve();
        }).catch(() => {
          this._http.Get('/Client/assets/config.json')
            .toPromise()
            .then(data => {
              console.log(data);
              this.appConfig = data;
            }).catch(error => {
              console.error(error);
              reject();
            });
        });
    });
  }

Angular 8 - Using HttpClient to Get a json configuration file from assets directory, can't find /assets/config.json when deploying to IIS

1 Answers1