Route-specific app-shell: prerendering dynamic parameterized pages
Nobody has claimed this yet.
Assessment
- Difficulty
- 5/5
- Estimated time
- Over a week
- Newbie friendliness
- 35/100
- Issue type
- Feature
- Clarity
- Mostly clear
- Activity status
- Stale
- Tech stack
- angular, typescript
- Domain
- build-system
Research direction
Start with Angular's hybrid-rendering documentation for parameterized routes, then inspect the prerender route configuration shown in app.routes.server.ts and the server middleware example in server.ts. Compare the requested posts/** behavior with the existing getPrerenderParams approach; done means a route-specific prerendered skeleton can serve arbitrary dynamic parameters without custom middleware.
Written by the indexing model from the issue text.
Description
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:
- Adding a "fake" route parameter that I would configure Angular to prerender.
- This route would render the skeleton/carcass of the page as per my use case.
- Serving the route myself in
server.tswith 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.
- Dominant language
- TypeScript
- Stars
- 27k
- Forks
- 11.8k
- Avg merge
- 16h 35m
- Merged PRs (30d)
- 176
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from angular/angular-cli
-
area: @angular/build gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
angular/angular-cli#33055 · 1 comment · 3 reactions ·
-
area: @angular/build gemini-triaged
Difficulty 4/5 3-5 days Newbie friendliness 72/100
angular/angular-cli#34137 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 1 assignee ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 1 assignee ·
All issues in angular/angular-cli
Similar issues
-
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
ontola/atomic-server#1625 ·
-
bug
Difficulty 2/5 1-3 hours Newbie friendliness 70/100
melgarafael/DeskcommCRM#1451 ·
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
-
bug via-triage
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
bot:ai-assisted component:compact-js status:untriaged
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
midnightntwrk/midnight-sdk#403 ·