Route-specific app-shell: prerendering dynamic parameterized pages

Beginne mit der Dokumentation zum hybriden Rendering von Angular für parametrisierte Routen und sieh dir anschließend die in app.routes.server.ts gezeigte Konfiguration der Prerender-Routen sowie das Beispiel für Server-Middleware in server.ts an. Vergleiche das angeforderte Verhalten für posts/** mit dem bestehenden Ansatz getPrerenderParams; als erledigt gilt die Aufgabe, wenn ein routenspezifisches, vorab gerendertes Grundgerüst beliebige dynamische Parameter ohne benutzerdefinierte Middleware bedienen kann.

Which @angular/* package(s) are relevant/related to the feature request?

platform-server

Description

We have a use case, where we would like to always show the same prerendered page skeleton/carcass on a route that has dynamic parameters.
Looking at the new Angular server documentation, I do not see such option https://angular.dev/guide/hybrid-rendering#parameterized-routes.

Basically we would like posts/:id to return a single prerendered page for any :id parameter.

This page would show a loading skeleton and would let the browser handle the exact :id and the logic related to it.

Proposed solution

Add a wildcard ** route option that would indicate to Angular that this prerendered page handles any dynamic route parameters.

These wildcards could be used as the dynamic parameter in the build time when prerendering happens. It would be the component's responsibility to correctly handle the ** parameter and show some parameter-agnostic content (loaders/skeletons) that would then be prerendered by Angular and served by the server accordingly.

How it could look in app.routes.server.ts:

{
    path: 'posts/**',
    renderMode: RenderMode.Prerender
},

Excerpt from the imaginary post.component.ts:

private subscribeRouter() { // called in ngOnInit
    this.activatedRoute.params
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe(params => {
        const id: string = params.id;

        if (id === '**') {
          this.isCarcass = true; // post.component.html will render some skeleton/loader if isCarcass === true
        } else {
          this.getPost(id);
        }
      });
  }

Alternatives considered

I am currently considering:

1. Adding a "fake" route parameter that I would configure Angular to prerender.
2. This route would render the skeleton/carcass of the page as per my use case.
3. Serving the route myself in server.ts with a middleware that runs before any middleware generated by Angular CLI.

app.routes.server.ts:

{
    path: 'posts/:id',
    renderMode: RenderMode.Prerender,
    getPrerenderParams(): Promise<Record<string, string>[]> {
      return Promise.resolve(['carcass'].map(i => ({ id: i })));
    }, // prerenders in browser/posts/carcass
 },

server.ts:

// My new middleware
app.use(
  '/posts/:id',
  express.static(join(browserDistFolder, 'posts', 'carcass', 'index.html'), {
    maxAge: '1y',
    redirect: false,
  }),
);

// Default generated by Angular
app.use(
  express.static(browserDistFolder, {
    maxAge: '1y',
    index: false,
    redirect: false,
  }),
);

// Default generated by Angular
app.get('/**', (req, res, next) => {
  angularApp
    .handle(req)
    .then(response =>
      response ? writeResponseToNodeResponse(response, res) : next(),
    )
    .catch(next);
});

I have tested this approach and it works fine, however, it feels pretty hacky.