I use Angular 17 with SSR. My main goal for using SSR is to use Meta from "@angular/platform-browser" for showing prerender info with replacing tags on facebook during creat post. Everything works good. But not with route where I have a param: id
I found the documentation for prerender routes with param on official official website
All I need it add each route manually to routes.txt in angular.json
"prerender": {
"routesFile": "src/assets/routes.txt"
},
I added for testing two routes with param to this file
/encyclopedia/persons/157151314
/encyclopedia/persons/425922380
And in result I have this routes after build in my dist/prerendered-routes.json
{
"routes": [
"/",
"/contacts",
"/encyclopedia",
"/encyclopedia/history",
"/encyclopedia/persons",
"/encyclopedia/persons/157151314",
"/encyclopedia/persons/425922380",
"/encyclopedia/photos",
"/memory",
"/support"
]
}
When I load this route /encyclopedia/persons my replacing metatags works good
setCeoSettings() {
const pageUrl = 'https://my-web-site/encyclopedia/persons';
this.metaService.updateMetaTags({
title: response.Title,
type: 'article',
imageSrc: response.CoverPhoto,
url: pageUrl,
description: response.Description,
cardType: 'summary_large_image',
});
}
For example in /encyclopedia/persons there are 3 api-call to server and I put my setCeoSettings() function after response in one of them
getPaginationMemory(publish: boolean, pageNumber: number, push: boolean): void {
this.debounceSpiner = true;
const params = this.buildParam(publish, pageNumber)
this.personService.getPagination(params).subscribe(
(suc: string) => {
this.personResponse = deserialize(PaginationGeneric<Person>, suc);
this.personResponse.Items.forEach(elemet =>
this.persons.push(elemet));
this.setCeoSettings(); //<--- here
this.debounceSpiner = false;
this.debounceSpinnerLoadMorePerson = false;
},
() => {
this.debounceSpiner = false;
});
}
And it works good. My tags in prerender during creating post on facebook works good. I see cover photo from response and all other information on facebook post.
But when I create post with this route /encyclopedia/persons/157151314 I have a problem. I see on facebook in prerender my metatags from index.html page. Not from my setCeoSettings() with response information
In both cases I make my api call from ngOnInit()
Part of my AppRoutingModule
const routes: Routes = [
{
path: '', component: HomeComponent
},
{
path: 'encyclopedia', component: EncyclopediaComponent
},
{
path: 'encyclopedia/persons', component: PersonsComponent
},
{
path: 'encyclopedia/persons/:id', component: PersonComponent,
},
{
path: 'encyclopedia/history', component: HistoryComponent
},
{
path: 'encyclopedia/history/:id', component: HistoryViewComponent
},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}
Any idias how to fix it?