angular: Angular SSR not updating dynamic meta tags and content received from API

Which @angular/* package(s) are the source of the bug?

platform-server

Is this a regression?

Yes

Description

I’m working on an Angular SSR application and I’m facing a problem when updating Open Graph meta tags after receiving content from the API, as in another component that updates directly (without consuming the API) there is no problem. Although when viewing elements in the page source code, all meta tags are updated. The problem is that when sharing, they don’t show the updated meta tags.

After I updated to Angular 17 it stopped working, but I’m not sure, because it was in some version that it stopped working and I had made several Angular updates.

Please provide a link to a minimal reproduction of the bug

Unfortunately, I have no way of reproducing the error for you to analyze, as the error only occurs in production and cannot be reproduced in stackblitz.

Please provide the exception or error you saw

ngOnInit(): void {
  this.metadataService.removeTags(); // Removing existing tags

  // ... (other initialization code)

  if (this.reNumber.test(sumarioId) && Number(sumarioId) > 0) {
    this.artigoService.GeArticle(sumarioId).subscribe({
      next: (res: Artigo) => {
        if (res != null) {
          this.artigo = res;
          // ... (other processing)
          this.updateMetaDataArticle();
        }
      },
      // ... (error and complete handlers)
    });
  }
}


private updateMetaDataArticle(): void {
  let meta: PageMetaData = new PageMetaData();
  // ... (other meta data setup)

  meta.title = this.artigo?.manuscriptTitle as string;
  meta.description = this.artigo?.abstract as string;

  if (this.metadataService) {
    this.metadataService.updateMetadata(meta);
    // ... (other actions)
  }
}

public updateMetadata(metadata: Partial<PageMetaData>): void {
  // ... (other metadata updates)
  this.metaTagService.addTags([
    { property: 'og:title', content: metadata.title },
    { property: 'og:description', content: metadata.description }
    // ... (other meta tags)
  ], false);
}

public removeTags(): void {
  if (!this._platform.isBrowser) return; // Avoid processing during server-side rendering

  this.metaTagService.removeTag('property="og:title"');
  this.metaTagService.removeTag('property="og:description"');
  // ... (other tag removals if relevant)
}

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.8
Node: 20.10.0
Package Manager: npm 10.2.5
OS: win32 x64

Angular: 17.0.8
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, ssr

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.8
@angular-devkit/build-angular   17.0.8
@angular-devkit/core            17.0.8
@angular-devkit/schematics      17.0.8
@angular/cdk                    17.0.4
@angular/material               17.0.4
@schematics/angular             17.0.8
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response