Fetching File from Assets not Working with Angular Server Side Rendering

Viewed 2091

I am loading a json file from the assets folder at runtime with the following code:

initializeApp = () =>
  new Promise(async resolve => {
    this.settings await this.http.get(`/assets/file.json`).toPromise();
    resolve();
  });

This code works fine when compiling the angular app with ng serve. However I also want to support server side rendering. When building the server with npm run build:ssr and afterwards running it with npm run serve:ssr, I get the following error on the node server:

ERROR { Error: Uncaught (in promise): Error
    at resolvePromise (/project/services/frontend/dist/server.js:1003:31)
    at /project/services/frontend/dist/server.js:913:17
    at rejected (/project/services/frontend/dist/server/main.js:136313:93)
    at ZoneDelegate.invoke (/project/services/frontend/dist/server.js:542:26)
    at Object.onInvoke (/project/services/frontend/dist/server/main.js:118689:33)
    at ZoneDelegate.invoke (/project/services/frontend/dist/server.js:541:52)
    at Zone.run (/project/services/frontend/dist/server.js:301:43)
    at /project/services/frontend/dist/server.js:1061:34
    at ZoneDelegate.invokeTask (/project/services/frontend/dist/server.js:574:31)
    at Object.onInvokeTask (/project/services/frontend/dist/server/main.js:118670:33)
2 Answers

When using angular universal, URL must be absolute. So either have the base URL in your configuration somewhere, or retrieve it from the underlying webserver like shown in the documentation

In server side add resolve or reject because your promise is not handle by any resolver or reject.

Related