Angular SEO service updateTag type not assignable

OriO 0
Viewed 10

i'm trying to create an seo service based on Angular's Meta service (https://angular.io/api/platform-browser/Meta)

one of the methods in the service is social media tags manager. for some reason it keeps failing with this message:

Argument of type '{ name: string; content: string; property?: undefined; } | { property: string; content: string; name?: undefined; }' is not assignable to parameter of type 'MetaDefinition'. Type '{ name: string; content: string; property?: undefined; }' is not assignable to type 'MetaDefinition'. Type '{ name: string; content: string; property?: undefined; }' is not assignable to type '{ [prop: string]: string; }'. Property 'property' is incompatible with index signature. Type 'undefined' is not assignable to type 'string'

here is the method syntax:

  socialTags(action:string,pageTagContent:PageTagContent) {

      
      const socialTags =[
        {name:"twitter:title", content: pageTagContent.pageTitle},
        {name:"twitter:description", content: pageTagContent.description},
        {name:"twitter:image", content: pageTagContent.image},
        {name:"twitter:card", content: pageTagContent.imageLarge},
        {property:'og:title', content: pageTagContent.pageTitle},
        {property:'og:image', content: pageTagContent.image}
      ]

      if(action === 'update'){
        socialTags.forEach( obj => this.meta.updateTag( obj ) ) //obj throws the error
      }else{
       //something else
      }

    }

i've based the service on this tutorial: https://www.tektutorialshub.com/angular/meta-service-in-angular-add-update-meta-tags-example/

not sure why actually.... thanks for the help!

meta seo service typescript angular
1 Answers

ok so after a while I've managed to come up with an idea, obviously it's a type issue. but where!? none of the tutorials are even mentioning the types is the context of the updateTag method, so i had to go and dig in the source code...

socialTags(action:string,pageTagContent:PageTagContent) {

  //there is more to this subject, also apple meta tags... more og (facebook) tags...
  const socialTags:**MetaDefinition[]** =[
    {name:"twitter:title", content: pageTagContent.pageTitle},
    {name:"twitter:description", content: pageTagContent.description},
    {name:"twitter:image", content: pageTagContent.image},
    {name:"twitter:card", content: pageTagContent.imageLarge},
    {property:'og:title', content: pageTagContent.pageTitle},
    {property:'og:image', content: pageTagContent.image}
    // { property:"og:type", content:"video.movie" },
    // { property:"og:url", content:"https://www.imdb.com/title/tt0117500/" }, ...
  ]

  if(action === 'update'){
    socialTags.forEach( obj => this.meta.updateTag( obj ) )
  }else{
    this.meta.addTags(socialTags)
  }

}
OriO0
Related