Description
Which @angular/* package(s) are the source of the bug?
router, Don't known / other
Is this a regression?
Yes
Description
I guess Angular does not immediately find the dynamic product/:slug route on first direct loading (refresh or manually entered URL).
As a result, by default Angular loads the root route ‘’ (home), then, after API resolution, displays the product content. As a result, home is initially displayed before the product.
Technical analysis
Angular Router on the client side does not know at bootstrap time all the dynamic routes based on slug.
It cannot directly match /product/whatever.
The SSR uses serverRoutes with server-side rendering that serves the right page.
But on the client side, Angular must first recognize the route, and resolving the route with resolve is done after the first rendering.
Component loading is delayed (loadComponent), and resolve is asynchronous.
This delay causes an initial rendering of a default route (home) before the dynamic route.
Please provide a link to a minimal reproduction of the bug
https://recipes-six-ashy.vercel.app/produit/pistolet-de-massage-xiaomi
Please provide the exception or error you saw
SSR issue
Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 20.0.2
Node: 22.16.0
Package Manager: npm 10.8.1
OS: win32 x64
Angular: 20.0.3
... common, compiler, compiler-cli, core, forms
... platform-browser, platform-server, router
Package Version
------------------------------------------------------
@angular-devkit/architect 0.2000.2
@angular-devkit/core 20.0.2
@angular-devkit/schematics 20.0.2
@angular/build 20.0.2
@angular/cli 20.0.2
@angular/ssr 20.0.2
@schematics/angular 20.0.2
rxjs 7.8.2
typescript 5.8.3
Anything else?
Code part
product.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { CommonModule, isPlatformBrowser } from '@angular/common';
import { ProductService } from '../../services/requests/product';
import { HeroProductComponent } from '../../components/hero/product-hero';
import { Inject, PLATFORM_ID } from '@angular/core';
@Component({
selector: 'app-produit',
standalone: true,
templateUrl: './produit.html',
imports: [HeroProductComponent, CommonModule],
providers: [ProductService]
})
export class Produit implements OnInit {
page: any = null;
error: string | null = null;
slug = '';
isBrowser: boolean;
constructor(
private route: ActivatedRoute,
private productService: ProductService,
@Inject(PLATFORM_ID) platformId: Object
) {
this.isBrowser = isPlatformBrowser(platformId);
}
ngOnInit(): void {
this.route.data.subscribe(data => {
this.page = data['productData']?.product;
});
}
loadPage() {
if (!this.isBrowser) return;
this.productService.getProductAndMoreProducts(this.slug, false, null)
.then(data => {
this.page = data?.product;
})
.catch(() => {
this.error = 'Erreur de chargement';
});
}
}
app.routes.server.ts
```typescript
import { RenderMode, ServerRoute } from '@angular/ssr';
export const serverRoutes: ServerRoute[] = [
{ path: '', renderMode: RenderMode.Prerender },
{ path: 'about', renderMode: RenderMode.Prerender },
{ path: 'produit/:slug', renderMode: RenderMode.Server },
{ path: '**', renderMode: RenderMode.Server }
];