Search code examples
angularprerender

Angular - Prerender command fails and errors

I have an angular application setup, nigh on empty. Just recreating a home page example to test general speed in angular.

I have followed the official docs on simply enabling prerendering.

https://angular.io/guide/universal

BUT, when I run the command npm run prerender (ng run RegTransfersUI:prerender)

I get:

    Prerendering 1 route(s) to D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\browser...ERROR NetworkError
    at XMLHttpRequest3.send (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1518293)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:2901957)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
    at Object.errorContext (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1407544)
    at Observable2.subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201183)
    at scheduleTask (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3436471)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3437074)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
ERROR NetworkError
    at XMLHttpRequest3.send (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1518293)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:2901957)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
    at Object.errorContext (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1407544)
    at Observable2.subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201183)
    at scheduleTask (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3436471)
    at Observable2._subscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:3437074)
    at Observable2._trySubscribe (D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201465)
    at D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\server\main.js:1:1201357
√ Prerendering routes to D:\git\Regtransfers-Core-Ang\dist\RegTransfersUI\browser complete.
- Generating service worker...1 rules skipped due to selector errors:
  legend+* -> Cannot read properties of undefined (reading 'type')
× Service worker generation failed.
EPERM: operation not permitted, opendir 'D:\System Volume Information'

I cant find anything on this.

Solution

  • Interceptor:

    Do not use Object.assign() instead of request.clone(). I don't know why but apparently you should not be doing any logic other than using reqeust.clone()!

    HTTP in ngOnInit():

    If you are sending an HTTP request in oninit hook or similar hooks, which will be rendered as soon as component instantiates, like constructor or ngAfterView and ..., use any logic to make sure your code is client side rendered, like if (typeof window !== 'undefined' && window.document), do this for all routes you have defined.