Pre-rendered routes are not served

[timothyBrake]

The pre-rendered routes are not served.

Most basic example:

1. Clean git clone of this project
2. Build the project
3. Then manually update /en/page-1.html and add text This is pre-rendered
4. Start proxy server
5. Open Chrome and make sure using DevTools > Network > Disable Cache is checked
6. Using browser navigate to http://localhost:4000/en/page-1
7. Should show the This is pre-rendered but it is NOT showing that page
8. Using browser navigate to http://localhost:4000/en/page-1/index.html
9. This DOES show the pre-rendered page

Somewhere along the way Angular isn't serving the pre-rendered page when navigating to http://localhost:4000/en/page-1

Any ideas how to configure Angular 17 to make pre-render work out of the box (instead of manually serving these pages when they exist)?

[timothyBrake]

I've opened a bug ticket at Angular angular/angular-cli#27196

[agarciar]

Hello Timothy,

In our Angular projects with SSR (Server-Side Rendering), we do not implement pre-rendering. However, after reviewing how the Express server operates, I think that what you're experiencing is likely not a bug, but rather an inherent feature of SSR.

Upon examining the server.ts file, you will notice that all requests are routed to the SSR engine, except for static content (such as images, CSS stylesheets, and JavaScript files) which is redirected to the browser folder.

A possible solution would be to add the URLs or the specific pattern for the pre-rendered content, directing it to the browser folder instead of processing it through the SSR engine. This could help to properly handle the content you prefer to pre-render.

I hope this suggestion proves to be helpful.

[timothyBrake]

That’s what I’m doing as a workaround now. I manually serve them but it should be done by the Angular framework. Angular does serve these pre-rendered pages correctly if the project isn’t using i18n. It only doesn’t work as expected when adding i18n. Hence I opened the bug ticket there as well.

[agarciar]

@timothyBrake after reviewing and debugging the code of CommonEngine, we have seen that in this case, Angular uses the full URL to search for the pre-rendered page.

We have adjusted publicPath on server.ts to directly reference the browser folder without concatenating the base href.

commonEngine
      .render({
        bootstrap,
        documentFilePath: indexHtml,
        url: `${protocol}://${headers.host}${originalUrl}`,
        publicPath: resolve(serverDistFolder, `../../browser/`), // publicPath does not need to concatenate the language.
        providers: [
          { provide: APP_BASE_HREF, useValue: langPath },
          { provide: LOCALE_ID, useValue: lang },
          { provide: RESPONSE, useValue: res },
          { provide: REQUEST, useValue: req },
        ],
      })

Thank you very much for the information on pre-rendering.