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

leandrotassi commented 4 months ago

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

AndrewKushnir commented 4 months ago

@leandrotassi unfortunately we can't perform any investigation with the information that you've provided and we'd need a repro to see what's happening and whether there is anything on the framework side that should be fixed. You may not be able to reproduce the problem via Stackblitz (as you've mentioned), but you may try creating a new Angular app (via ng new) and try to reproduce a problem there. Note: please do not share the code of your app, create a minimal possible example code to illustrate a pattern that causes the problem.

hieutranagi47 commented 3 months ago

@AndrewKushnir: This is a link you can test: https://ssr-api-ivory.vercel.app/post/3 And this is the repo that I used to deploy into the above host: https://bitbucket.org/My_Profiles/ssr-api/src/main/ I think that we will have a solution to apply SSR in this use-case.

kodetratech commented 3 months ago

@hieutranagi47: did you find any solution for this? Is there any update on this? After upgrading to latest angular 17 version, it stopped working

hieutranagi47 commented 2 months ago

@kodetratech I don't know the root cause of the issue in this case, Angular renders the home page first, then switch to the post detail page although I access the post detail page. I guess that it's Angular issue, so I don't know what the best solution for this should be. If your page calls only one API => There is no problem.

AndrewKushnir commented 2 months ago

@hieutranagi47 thanks for creating a test application! I've tried running it locally and I can see updated meta tags in the page source once the page is SSR'ed and HTML is delivered to a browser. Could you please provide a bit more info on how to reproduce the problem locally?

hieutranagi47 commented 2 months ago

@kodetratech Thank you so much for your time. We don't face the issue when we serve the project locally. The problem occurs when we build it as production and deploy it into a server. You can check it here: https://ssr-api-ivory.vercel.app/post/3

yogeshbansal commented 2 months ago

@hieutranagi47 I am also facing the same problem. one thing I can tell something has happened after Angular version 17.0.3. I have an application that uses Angular 17.0.3, when I share the URL of my application to social media like Twitter or Facebook, it renders the dynamic meta tags correctly. But my other application which is running on angular 17.2.1, URLs are not working on social media sites. it renders the default value of the meta tags. Example of app running on 17.03 ( dynamic meta tags working) : https://contentbuffer.com/issues/news/technical/telegram-now-lets-users-convert-personal-accounts-business-accounts Example of app running on 17.2.1 ( dynamic meta tags not working): https://codebrainery.com/article/navigating-ai-revolution-software-development-chatgpt

roosikem commented 2 months ago

@hieutranagi47 I am also facing the same problem. project is working locally but in production it is not working. meta tags are not updating and not able to working in social media (not displaying correct meta tags and images, showing only default tags)

hieutranagi47 commented 2 months ago

If you notice, you will see that Angular renders the root route ("/"), before render the actual route.

roosikem commented 2 months ago

I have notice that when updating the meta tags after receiving response from the api call it is not updating but without API call it is working.

Any solution for this

monacodelisa commented 2 months ago

I am also looking for a solution, please share updates whenever possible

hieutranagi47 commented 2 months ago

@roosikem @monacodelisa @yogeshbansal : While we are waiting for the fix from the Angular core team, we could try the pre-render feature of Angular CLI. I tested it and it works. https://angular.io/guide/prerendering#prerendering-parameterized-routes

monacodelisa commented 2 months ago

@roosikem cool thank you, I am actively trying different options, I will give it a try

yogeshbansal commented 1 month ago

@hieutranagi47 @roosikem @AndrewKushnir Just wondering...Does anyone know the cause of this issue?

leandrotassi commented 1 month ago

After careful analysis of the situation, I identified that when sharing a website on my own platform, the meta tag information was not being displayed correctly. Instead, default information from the index.html file was being loaded. This issue arises due to the behavior of certain social media crawlers, which do not wait for the website to be fully rendered before collecting information. For example, Twitter is more tolerant in this regard, while Facebook or LinkedIn are not.

To address this issue, I adopted a series of strategic measures:

I used resolvers to consume the API and prepare the update of meta tags in the component, as the resolver is called before the route is activated. This way, when the route is activated, the meta tags are updated immediately.
In the component, I obtained the data consumed in the resolver to update the meta tags.
I am using version 17.3 of Angular. I started the project from scratch with default settings and later migrated the project from the previous version to this one, using the builder "@angular-devkit/build-angular:application" which comes pre-configured. When updating the Angular version with ng update, the builder was not updated.
On the Ubuntu server hosting the site, I use NGINX and switched from Forever to PM2 to run the site. Forever has not been updated for a long time, and PM2 is always up-to-date and faster.

With these measures, I was able to completely resolve the sharing problem.

I hope these tips can help those facing the same issue.

yogeshbansal commented 1 month ago

@leandrotassi thanks for the response...I am also exactly doing the same. But it's not working for me. If I share the URL on Twitter or facebook, it's still picking the default meta tags.