title: JSON file in "src/assets" folder not found
body: <p>I'm trying to do dynamic app configuration following this article: <a href="https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/" rel="nofollow noreferrer">https://devblogs.microsoft.com/premier-developer/angular-how-to-editable-config-files/</a>. Browser returns 404 not found on the json file, although it can be accessed directly.</p>
  
  <p>I put the configuration in assets folder:</p>
  
  <p><strong>src/assets/config/config.json</strong></p>
  
  <pre><code>{
      "api": {
          "baseUrl": "http://xx.com"
      }
  }
  </code></pre>
  
  <p>I have a service that loads the config.json:</p>
  
  <p><strong>src/app/services/app.config.service.ts</strong></p>
  
  <pre><code>import { Injectable } from '@angular/core'
  import { HttpClient } from '@angular/common/http'
  import { IAppConfig } from '../models/appConfig'
  import { environment } from 'environments/environment'
  
  @Injectable()
  export class AppConfigService {
      static settings: IAppConfig = {} as IAppConfig
  
      constructor(private http: HttpClient) {}
  
      load() {
          const jsonFile = `assets/config/config.json`
          return new Promise&lt;void&gt;((resolve, reject) =&gt; { 
              this.http
                  .get(jsonFile)
                  .toPromise()
                  .then((response: any) =&gt; {
                      console.log(response, response.json())
                      AppConfigService.settings = &lt;IAppConfig&gt;{
                          ...environment,
                          ...response,
                      }
                      resolve()
                  })
                  .catch((response: any) =&gt; {
                      console.log(response)
                      reject(
                          `Could not load app configuration file '${jsonFile}': ${JSON.stringify(
                              response
                          )}`
                      )
                  })
          })
      }
  }
  </code></pre>
  
  <p>The service is utilized on APP_INITIALIZER:</p>
  
  <p><strong>src/app/app.module.ts</strong></p>
  
  <pre><code>import { AppConfigService } from './services/app.config.service'
  
  ...
  providers: [
          { provide: LOCALE_ID, useValue: 'da' },
          AppConfigService,
          {
              provide: APP_INITIALIZER,
              useFactory: initializeApp,
              deps: [AppConfigService],
              multi: true,
          },
      ],
  
  ...
  </code></pre>
  
  <p>I serve the app with <code>ng serve</code>. I can access the it directly with <code>http://localhost:4200/assets/config/config.json</code>. But the browser console complains: </p>
  
  <pre><code>ERROR Could not load app configuration file 'assets/config/config.json': {"body":{"error":"Collection 'config' not found"},"url":"assets/config/config.json","headers":{"normalizedNames":{},"lazyUpdate":null},"status":404,"statusText":"Not Found"}
  defaultErrorLogger @ core.js:15724
  setTimeout (async)
  scheduleTask @ zone.js:2302
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:410
  onScheduleTask @ zone.js:301
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:404
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:261
  scheduleMacroTaskWithCurrentZone @ zone.js:1245
  (anonymous) @ zone.js:2317
  proto.&lt;computed&gt; @ zone.js:1569
  (anonymous) @ delay-response.js:16
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.error @ Subscriber.js:147
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error @ Subscriber.js:80
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error @ Subscriber.js:60
  (anonymous) @ backend.service.js:278
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
  push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  (anonymous) @ delay-response.js:8
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
  (anonymous) @ subscribeTo.js:21
  subscribeToResult @ subscribeToResult.js:11
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._next @ tap.js:51
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeSubscriber._next @ take.js:40
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next @ filter.js:38
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  push../node_modules/rxjs/_esm5/internal/BehaviorSubject.js.BehaviorSubject._subscribe @ BehaviorSubject.js:22
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
  push../node_modules/rxjs/_esm5/internal/Subject.js.Subject._trySubscribe @ Subject.js:89
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._subscribe @ Observable.js:78
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28
  push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  push../node_modules/rxjs/_esm5/internal/operators/take.js.TakeOperator.call @ take.js:24
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  push../node_modules/rxjs/_esm5/internal/operators/tap.js.DoOperator.call @ tap.js:18
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  (anonymous) @ subscribeTo.js:21
  subscribeToResult @ subscribeToResult.js:11
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:74
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:68
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:51
  push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54
  (anonymous) @ scalar.js:5
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:43
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:29
  push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:29
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:24
  (anonymous) @ Observable.js:98
  ZoneAwarePromise @ zone.js:910
  push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.toPromise @ Observable.js:96
  (anonymous) @ app.config.service.ts:17
  ZoneAwarePromise @ zone.js:910
  push../src/app/services/app.config.service.ts.AppConfigService.load @ app.config.service.ts:14
  (anonymous) @ app.module.ts:27
  push../node_modules/@angular/core/fesm5/core.js.ApplicationInitStatus.runInitializers @ core.js:16739
  (anonymous) @ core.js:17774
  _callAndReportToErrorHandler @ core.js:17867
  (anonymous) @ core.js:17772
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  onInvoke @ core.js:17299
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:17213
  push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModuleFactory @ core.js:17763
  (anonymous) @ core.js:17803
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391
  push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150
  (anonymous) @ zone.js:889
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:423
  push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:195
  drainMicroTaskQueue @ zone.js:601
  Promise.then (async)
  scheduleMicroTask @ zone.js:584
  push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238
  push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258
  scheduleResolveOrReject @ zone.js:879
  ZoneAwarePromise.then @ zone.js:1012
  push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:17803
  ./src/main.ts @ main.ts:12
  __webpack_require__ @ bootstrap:83
  0 @ main.ts:13
  __webpack_require__ @ bootstrap:83
  checkDeferredModules @ bootstrap:45
  webpackJsonpCallback @ bootstrap:32
  (anonymous) @ main.js:1
  Show 60 more frames
  </code></pre>
  
  <p>Hints or help appreciated.</p>
  
  <p><strong>-- UPDATE --</strong></p>
  
  <p>I found my own solution for the problem which I posted below.</p>