Routes with param id not working for prerender in Angular 17 SSR

128 Views Asked by At

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?

0

There are 0 best solutions below