Angular UpdateTag is working fine in inspection element but not showing meta tag changes in page view source

This issue has been created since 2022-09-19.

I am using Angular 13. I have set default meta tag in index.html file. I have successfully updated the meta tag using the updateTag event but It works fine in the inspect element but does not update the view source page. I want to set dynamic information in meta tag using API call. When I check by inspect, it will show updated data but when I share the link on Facebook it will not reflect updated data.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule, Meta } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module'; 

import {CoreModule } from './core/core.module';
import {HttpClientModule, HTTP_INTERCEPTORS} from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    CoreModule,
  ],
  providers: [Meta]
  bootstrap: [AppComponent]
})
export class AppModule { }

index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Title Example</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <link rel="canonical" href="https://example.com/" />
  <meta name="robots" content="index, follow" />
  <meta name="description"
    content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
  <meta name="keywords" content="test example, lorem ipsum">
  <meta property="og:url" content="https://example.com/" />
  <meta property="og:site_name" content="ExampleSite" />
  <meta property="og:locale" content="en_US" />
  <meta property="og:type" content="website" />
  <meta property="og:title" content="Lorem Ipsum is simply dummy text." />
  <meta property="og:description"
    content="Lorem Ipsum is simply dummy text of the printing and typesetting industry." />
  <meta property="og:image" content="https://example.com/assets/logo/socialshare.png" />

  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
</head>

<body>
  <app-root>
  </app-root>
</body>

</html>

service.ts

import { Injectable,Inject  } from '@angular/core';
import { Title, Meta, MetaDefinition  } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { environment } from 'src/environments/environment';

@Injectable({
  providedIn: 'root'
})
export class SeoService {

  constructor(
    private metaTagService: Meta,
    private title: Title,
    private router: Router,
  ) {
   }

  updateTitle(title: string){
    this.title.setTitle(title);
  }

  updateTags(metaTags: MetaDefinition[]){
    metaTags.forEach(m=> this.metaTagService.updateTag(m));
  }
  
  updateTag(obj :any){
    this.metaTagService.updateTag(obj)
  }
}


Update tag on test.ts

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, ParamMap } from '@angular/router';
import { Service } from 'src/app/service.service';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {
 
  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private seo: Service
  ) {
   }

  ngOnInit(): void {
   this.updateTags()
  }

   updateTags(){
    this.seo.updateCanonicalUrl(environment.RouterBaseUrl + this.router.url)
    this.seo.updateTitle(test + ' - Profile')
    this.seo.updateTags([
      { name: 'description', content: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'},
      { property: 'og:url', content: environment.RouterBaseUrl + this.router.url},
      { property: 'og:title', content: test + ' - Profile'},
      { property: 'og:description', content: 'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book'},
      { property: 'og:image', content: https://example.com/assets/images/test.png },
    ]);
   }
}

pkozlowski-opensource wrote this answer on 2022-09-19

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.

More Details About Repo
Owner Name angular
Repo Name angular
Full Name angular/angular
Language TypeScript
Created Date 2014-09-18
Updated Date 2022-10-04
Star Count 84139
Watcher Count 3064
Fork Count 22243
Issue Count 1206

YOU MAY BE INTERESTED

Issue Title Created Date Comment Count Updated Date
[Question] Merging changes from upstream 1 2022-09-16 2022-10-01
[Question] Porting to Pale Moon possible? 4 2022-09-16 2022-10-01
Auto close brackets/parentheses 1 2021-11-07 2022-09-11
when use language-html do not show me the suggestions 1 2021-11-05 2022-09-11
plugin crashes plasmashell when using a wallpaper built by kdynamicwallpaperbuilder 1 2022-03-28 2022-08-23
Should there be any changes in the inference code for Korean inputs? 3 2021-04-20 2022-09-25
Redundant copies of data in cdph-age.csv 1 2021-08-16 2022-09-18
Aborting a job leads to an unlimited amount of toast-popups about its completion 4 2022-07-15 2022-09-30
Possibillity to get Tally Status of the sender ? 2 2021-12-19 2022-09-18
Meshing a single triangle sometimes returns an empty mesh 2 2022-01-04 2022-09-09
Instructions are misleading 4 2021-07-02 2022-09-23
Address python leaks 9 2022-02-13 2022-09-18
Include elementary stylesheet in Flatpak 0 2021-02-19 2022-10-01
Enable developer tools when running from Terminal 0 2021-02-18 2022-10-01
Open external links 0 2021-02-19 2021-11-13
Follow system dark style 0 2021-02-18 2022-10-01
Save and restore last-viewed page 0 2021-02-19 2022-08-08
Unable to get more than 4 posts. I think, the script is using the MBASIC_URL 18 2021-11-03 2022-09-22
Skip Glue archive in Iceberg table commits 0 2022-07-29 2022-09-21
当任务发生错误时,不能实时发送消息 0 2021-03-02 2021-12-11
Getting an error using postman web app with aws cognito 1 2021-12-14 2022-10-02
SignatureDoesNotMatch from github. 3 2020-05-07 2022-09-17
App goes all white. JavaScript error when attempting to close it. 3 2021-12-03 2022-07-31
"too many paths watched" 1 2022-01-07 2022-09-27
X time message support 0 2021-01-15 2022-09-01
TEAL 3 support 0 2021-03-15 2022-01-01
Consider removing the hardcoded `--strip=always` 2 2022-08-02 2022-09-21
Unsupported target type: macos_application (target //examples/macos/HelloWorldSwift:HelloWorldSwift) 0 2022-07-06 2022-09-21
Expected release for new `esModule` compatability? 3 2021-02-06 2022-09-10
Improve Provisioner Error Messaging Surrounding JWK Decryption 0 2022-02-04 2022-09-14
Continuous notifications 1 2022-06-08 2022-09-29
Cannot modify Frozen String 2 2021-08-16 2022-10-03
sequalize associations for make relation between tables of multiple schema 0 2022-09-10 2022-09-30
Replace: France 24 Espanol 1 2022-09-27 2022-09-29
[meta] Wiki Matrix link is outdated? 9 2021-08-27 2022-09-18
user with maintainer role is not calloborator 6 2022-05-31 2022-09-26
[Bug]: `CarPlayNavigationViewController`, `MapboxNavigationService` and `RouteController` are not deallocated after finishing active navigation session on CarPlay. 0 2022-05-09 2022-09-23
请求数据的时候有概率出现data functions should return an object 0 2022-03-15 2022-09-27
reduce gc time. 5 2021-04-21 2021-11-21
`useQuery(..., { ssr: false })` never requests data 0 2020-06-04 2022-10-01
Fancy indexing bug when combining masks with indexes 18 2022-01-22 2022-09-30
Make it easily possible to access the raw ResponseInterface 4 2021-05-25 2022-09-24
Improve `TlsValidator.HasSelfSignedCert()` 8 2022-03-04 2022-10-03
Remove automatic Uri normalization 1 2021-11-13 2022-09-29
Media: Improve average color handling & performance 13 2021-10-27 2022-10-02
Dataloading broke with recent commits 4 2021-11-11 2022-09-27
AutoSuggestBox's AccessKey not visible from automation tools 0 2022-10-03 2022-10-03
Deals stay in StorageDealStaged untill sealing queue becomes empty. 22 2021-09-02 2022-09-19
cdktf maven-metadata.xml file is not up to date 6 2022-04-06 2022-09-27
modify /bin/setup to Install Redis 4 2015-07-12 2022-08-14