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

[arunsoraba2]

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

platform-browser

Is this a regression?

Yes

Description

I am trying to add meta tags dynamically, i am able to see in inspect element, but view page source not displaying.

If i hardcode same metatags in service instead of taking from API it works. but if we take data from API and than try to set its not visible in View page source. (Same applies to dynamic content in page)

Here is little snap how i am setting meta tags

import { Title, Meta, MetaDefinition } from '@angular/platform-browser';


 constructor(private seoService:SeoService,
    private metaTagService: Meta){

  }
  ngOnInit(): void {
   this.seoService.getResponse().subscribe((res:any)=>{
    let tags: MetaDefinition[]=[];
    for(let i=0;i<res.meta.length; i++){
     let eachTag:MetaDefinition;
     if(res.meta[i].metaType== "name"){
       eachTag={
         name:res.meta[i].tag,
         content: res.meta[i].content
       }
     } else{
       eachTag={
         property:res.meta[i].tag,
         content: res.meta[i].content
       }
     }
     
     tags.push(eachTag);
    }
   
   this.metaTagService.addTags(tags);
   })

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

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

{
  "name": "cms-website-ui",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "dev:ssr": "ng run cms-website-ui:serve-ssr",
    "serve:ssr": "node dist/cms-website-ui/server/main.js",
    "build:ssr": "ng build && ng run cms-website-ui:server",
    "prerender": "ng run cms-website-ui:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/platform-server": "^14.1.0",
    "@angular/router": "^14.1.0",
    "@nguniversal/express-engine": "^15.2.0",
    "express": "^4.15.2",
    "http-client": "^4.3.1",
    "ngx-seo": "^5.3.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.3",
    "@angular/cli": "~14.1.3",
    "@angular/compiler-cli": "^14.1.0",
    "@nguniversal/builders": "^15.2.0",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^14.15.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.7.2"
  }
}

Anything else?

No response

[AndrewKushnir]

@arunsoraba2 thanks for reporting the issue.

You've mentioned that this is a regression, could you please let us know which versions you've used before where this problem was not present (that would help us to find the problem faster).

Also, it'd be helpful to have a minimal repro in a form of a Github repository, so that we can reproduce the issue. Note: please do not publish the code of your application. Instead, you can create a new ng new app and try to reproduce the problem there (by creating fake services).

You could also try updating the test app to the most recent version of Angular packages (currently v16.0.0-next.7) and see if the problem can still be reproduced.

Thank you.

[arunsoraba2]

Thanks for your response @AndrewKushnir , i will update try with updated version, if its not working i will create repo and share details today.

[AndrewKushnir]

@arunsoraba2 just wanted to share a quick update: the 16.0.0-rc.0 version of Angular packages was just released to NPM. This version contains some fixes for HttpClient-related logic and its interaction with the server-side rendering. Once you have a repro, please try to upgrade it to 16.0.0-rc.0 version of Angular packages and see if the problem is still there. Thank you.

[dmk1111]

@AndrewKushnir meta tags were populated in v15.1.3 but stopped working in v15.1.6. I've tried to update to v16.0.0 but it still doesn't work correctly.
In my case we use a common component as it could be reused in different places. This component is responsible for defining meta tags. Data is received from the parent component using resolver and then populated to the child component through @Input, that's why we generate meta tags inside ngOnInit and ngOnChanges hooks.

[alan-agius4]

@dmk1111, we'd need a minimal reproduction to look into this issue any further.

[dmk1111]

@alan-agius4 @AndrewKushnir sorry guys, just found out that the issue is inside my code, everything works fine for me in v15.1.6 as well

[AndrewKushnir]

@dmk1111 no problem, thanks for the update.

Closing this ticket, since there was no repro for the original issue, so we can not proceed with further investigation. Please reopen or create a new ticket if the problem still exists and there is a repro available. Thank you.

[RajHelge]

angular 15 Universal dynamic meta Updating
while i inspect element but not in viewsource

same features is working in angular 10

Here Is My Update Meta service function

updateMetaTags(imagepath, title, description,url?) {

  this.title.setTitle(title);
 this.meta.updateTag({ name: "twitter:description", content: description });
  this.meta.updateTag({ name: "twitter:title", content: title });
 this.meta.updateTag({ name: "twitter:image", content: imagepath });
 this.meta.updateTag({name:'twitter:url',content:'https://pw.internext.mu/'+url});

 this.meta.updateTag({ name: "description", content: description });
 this.meta.updateTag({ name: "title", content: title });
  this.meta.updateTag({ name: "image", content: imagepath });
 this.meta.updateTag({name:'url',content:'https://pw.internext.mu/'+url})

 this.meta.updateTag({ name: "og:title",property:'og:title', content: title });
 this.meta.updateTag({ name: "og:description",property:'og:description', content: description });
 this.meta.updateTag({ name: "og:image",property:'og:image', content: imagepath });
 this.meta.updateTag({name:'og:url',property:'og:url',content:'https://pw.internext.mu/'+url});

//console.log(title,description,imagepath,url);
}
i also tried with async/await

[Hoopou]

Same problem here, everything works fine in dev mode but as soon as I host my project on iss, the tags are not updating. As ssr wasn't implemented.