ssr does not render routes with custom matcher #29284
Labels
area: @angular/ssr
feature: in backlog
Feature request for which voting has completed and is now in the backlog
feature
Issue that requests a new feature
Comments
|
Supporting this could be challenging because routes need to be statically available, and the route tree must be serializable – something that isn't possible with a function. We previously discussed adding more constraints when using SSR, and this might need to be one of them. For now, I'll give it some more thought to see if there's a workable solution. |
alan-agius4
added
type: bug/fix
freq1: low
angular-robot
bot
added
the
feature: votes required
|
This feature request is now candidate for our backlog! In the next phase, the community has 60 days to upvote. If the request receives more than 20 upvotes, we'll move it to our consideration list. You can find more details about the feature request process in our documentation. |
Closed
1 task
alan-agius4
added a commit
to alan-agius4/angular-cli
that referenced
this issue
Jan 29, 2025
…render mode control
This commit adds support for custom route matchers in Angular SSR, allowing fine-grained control over the `renderMode` (Server, Client) for individual routes, including those defined with matchers.
Routes with custom matchers are **not** supported during prerendering and must explicitly define a `renderMode` of either server or client.
The following configuration demonstrates how to use glob patterns (including recursive `**`) to define server-side rendering (SSR) or client-side rendering (CSR) for specific parts of the 'product' route and its child routes.
```typescript
// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: '',
component: DummyComponent,
},
{
path: 'product',
component: DummyComponent,
children: [
{
path: '',
component: DummyComponent,
},
{
path: 'list',
component: DummyComponent,
},
{
matcher: () => null, // Example custom matcher (always returns null)
component: DummyComponent,
},
],
},
];
```
```typescript
// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '**', renderMode: RenderMode.Client },
{ path: 'product', renderMode: RenderMode.Prerender },
{ path: 'product/list', renderMode: RenderMode.Prerender },
{ path: 'product/**/overview/details', renderMode: RenderMode.Server },
];
```
Closes angular#29284
alan-agius4
added a commit
to alan-agius4/angular-cli
that referenced
this issue
Jan 29, 2025
…render mode control
This commit adds support for custom route matchers in Angular SSR, allowing fine-grained control over the `renderMode` (Server, Client) for individual routes, including those defined with matchers.
Routes with custom matchers are **not** supported during prerendering and must explicitly define a `renderMode` of either server or client.
The following configuration demonstrates how to use glob patterns (including recursive `**`) to define server-side rendering (SSR) or client-side rendering (CSR) for specific parts of the 'product' route and its child routes.
```typescript
// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: '',
component: DummyComponent,
},
{
path: 'product',
component: DummyComponent,
children: [
{
path: '',
component: DummyComponent,
},
{
path: 'list',
component: DummyComponent,
},
{
matcher: () => null, // Example custom matcher (always returns null)
component: DummyComponent,
},
],
},
];
```
```typescript
// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '**', renderMode: RenderMode.Client },
{ path: 'product', renderMode: RenderMode.Prerender },
{ path: 'product/list', renderMode: RenderMode.Prerender },
{ path: 'product/**/overview/details', renderMode: RenderMode.Server },
];
```
Closes angular#29284
alan-agius4
added a commit
to alan-agius4/angular-cli
that referenced
this issue
Jan 29, 2025
…render mode control
This commit adds support for custom route matchers in Angular SSR, allowing fine-grained control over the `renderMode` (Server, Client) for individual routes, including those defined with matchers.
Routes with custom matchers are **not** supported during prerendering and must explicitly define a `renderMode` of either server or client.
The following configuration demonstrates how to use glob patterns (including recursive `**`) to define server-side rendering (SSR) or client-side rendering (CSR) for specific parts of the 'product' route and its child routes.
```typescript
// app.routes.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: '',
component: DummyComponent,
},
{
path: 'product',
component: DummyComponent,
children: [
{
path: '',
component: DummyComponent,
},
{
path: 'list',
component: DummyComponent,
},
{
matcher: () => null, // Example custom matcher (always returns null)
component: DummyComponent,
},
],
},
];
```
```typescript
// app.routes.server.ts
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '**', renderMode: RenderMode.Client },
{ path: 'product', renderMode: RenderMode.Prerender },
{ path: 'product/list', renderMode: RenderMode.Prerender },
{ path: 'product/**/overview/details', renderMode: RenderMode.Server },
];
```
Closes angular#29284
alan-agius4
added
feature: in backlog
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
The new SSR implementation does not seem to work with custom route matcher.
The simple reproduction in linked repo is set to render all routes server side and contains two routes (one by path, one by custom matcher). When serving the app it shows the problem.
Please provide a link to a minimal reproduction of the bug
https://github.com/dklmuc/angular-ssr
Please provide the exception or error you saw
The defined route by path (/path) is rendered as expected but the one defined with a custom matcher (/matcher) is not rendered at all and results in a 404 Cannot GET /matcher.
Please provide the environment you discovered this bug in (run
ng version)Anything else?
Same problem after building the app and starting the bundle.
The text was updated successfully, but these errors were encountered: