how externalized parameters of serve Angular 10 in external file conf. json

Question

I would like to retrieve properties from an external source for my application

I' m looking for same principale of config.properties in java

config.json

{
  "myUrl": "http://localhost:8080"
}

App.module.ts

import {APP_INITIALIZER, NgModule} from '@angular/core';
...

export function initConfig(config: AppConfigService) {
  return () => config.load();
}

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule, RouterModule,
    AppRoutingModule,
    FormsModule, TableModule,
    HttpClientModule,
    FlexLayoutModule, FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    MatCardModule, MatButtonModule, MatListModule, MatIconModule, MatToolbarModule, MatSidenavModule, MatFormFieldModule,
    MatSelectModule, MatDatepickerModule, MatDatepickerModule, MatExpansionModule, MatInputModule, MatCheckboxModule, MatDialogModule,
    //ColorPickerModule,
    NgxMatColorPickerModule,
  ],
  providers: [DatePipe,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [AppConfigService],
      multi: true
    },
    { provide: MAT_COLOR_FORMATS, useValue: NGX_MAT_COLOR_FORMATS },
    {provide: DateAdapter, useClass: AppDateAdapter},
    {provide: MAT_DATE_FORMATS, useValue: APP_DATE_FORMATS}],
  bootstrap: [AppComponent],
})
export class AppModule {
}

app-config.service.ts

import {Injectable} from "@angular/core";
import {Subject} from "rxjs";
import {HttpClient} from "@angular/common/http";
import {environment} from "../environments/environment";

@Injectable({
  providedIn: 'root'
})
export class AppConfigService {
  private config: Config = null;
  public configSubject: Subject<any> = new Subject<any>();

  constructor(private http: HttpClient) { }

  public load() {
    return this.http.get(environment + 'config.json')
      .toPromise()
      .then((config: any) => {
        this.config = config;
        this.configSubject.next(this.config);
      })
      .catch((err: any) => {
        console.error('ERROR: ' + err);
      })
  }

  getMyUrl() {
    return this.config.myUrl;
  }
}

export class Config {
  myUrl: string;
}

But in the browser console, I get 2 Errors:

zone-evergreen.js:2845 GET http://localhost:4200/[object%20Object]config.json
app-config.service.ts:23 ERROR: [object Object]

I have tried to use the previews many times to find the change in location of the file but nothing seems to work

//environment.ts
export const environment = {
  production: false
};
//enviroment.prod.ts
export const environment = {
  production: true
};

i have only this in my environnent file