Angular (Universal) - Preloading JSON data with rel="preload"

Question

I have an angular application (which I am converting into SSR with angular universal).

During the load of the application (provider APP_INITIALIZER), I make a call to an endpoint to load some critical data for the angular app (which changes from time to time, so it cannot be set as a angular file). Here's the code I have right now:

//Code from app.module.ts

providers: [
{
      provide: APP_INITIALIZER,
      useFactory: appInit,
      multi: true,
      deps: [ConfigurationService]
    },
    (...)
]


export function appInit(configurationService: ConfigurationService) {
  return () => configurationService.loadData();
}



//Code from configurationService.ts

loadData(): Promise<any> {
     return this.ownApiService.getData().toPromise().then(data => {
     this.list.next(data);
});

//Code from ownAPIService
getData(): Observable<Data[]> {
    return this.http.get<Data[]>(environment.dataList, {
        headers: new HttpHeaders({
            accept: "*/*",
        })
    }).pipe(map(data => {
        return data;
    }));
}

Inside the getData function, I make a call using HttpClient (note that I cannot use fetch or XMLHttpRequest due to SSR).

In the index.HTML, I add the preload line, as follows:

<link rel="preload" href="{{REAL_URL}}.JSON" as="fetch" type="application/json" crossorigin>

I have already tried with the crossorigin, without it, without the type="application/json". When I look into the Network tab, I always see two requests:

Also, when I look into the console, it shows me:

A preload for '{{URL}}.json' is found, but is not used because the request headers do not match.

and

The resource {{URL}}.json was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.

I have checked the headers, they are the same. Yet, I cannot make this work properly. Any clue? I've seen several posts over the internet, but none with a pratical answer for an SSR situation.

Thanks for the help

question from:https://stackoverflow.com/questions/65832926/angular-universal-preloading-json-data-with-rel-preload

Answer 1

Waitting for answers