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

This issue has been tracked 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-05
Star Count 84147
Watcher Count 3063
Fork Count 22247
Issue Count 1201

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date