Meta tags are updating dynamically and showing in local view source but not on live view source in angular

Question

Meta tags are updating dynamically and showing in the local view source but not on the live view source in angular. What should I do so that it can be shown in live view source too on the server or a better solution? is there any thing need to do on server ? any help will be appreciated.

 getSinglePostInfo(id){
    this.postService.getSinglePostInfo(id).subscribe((data) => {
      console.log(data,  'oppa')
      setTimeout(()=> {
        this.metaTagService.updateTag({ property: 'og:title', content:  data['data'].description  });
        this.metaTagService.updateTag({ property: 'og:url', content: ' this.url + data['data'].id });
        this.metaTagService.updateTag( { property: 'og:description', content:data['data'].description });
      },3000)
     
    })
  }

I have tried calling meta tag update inside API call by getting only those data which is required its working fine locally and updating, showing in view source too but not on live URL.

Its also shows that it is updated in elements header but not showing update in view source on live.

Answer 1

I could find solution and its working now properly. I have added async ,await but the main reason was there was use of promise.all() in my same page where other unnecessary api was calling , so when I removed promise.all() , its start updating and showing in view source on live.

 async getSinglePostMetaData(id){
    await this.postService.getSinglePostMetaData(id).subscribe((data) => {
      console.log(data.data,  'oppa')
         this.metaTagService.updateTag({ property: 'og:title', content:  data.data.description });
         this.metaTagService.updateTag({ property: 'og:url', content:  this.url + data.data.id  });
         this.metaTagService.updateTag( { property:'og:image', content: img_path});
         this.metaTagService.updateTag( { property: 'og:description', content:data.data.description });
    
    })
  }