Angular Meta tags not working + not showing on page source

Except from the title service, the image, description, and keywords meta don't show up on any checker and don't work even though they appear in the dom I'm using Angular 13.0.2 and having the meta dynamically come from API calls. While I can understand why they don't appear in the page source, it feels like there's nothing I can do since the meta service doesn't work like its supposed to, I'm not sure I'm doing this right. I've also tried using updateTag instead of addTag to no avail.



import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DataServiceService } from 'src/data-service.service';
import { TranslateService } from '@ngx-translate/core';
import { Title, Meta } from '@angular/platform-browser';
import { TemplateChildComponent } from '../template-child/template-child.component';

@Component({
selector: 'app-template-page',
templateUrl: './template-page.component.html',
styleUrls: ['./template-page.component.css'],
entryComponents: [TemplateChildComponent],
encapsulation: ViewEncapsulation.None
})



export class TemplatePageComponent implements OnInit {
public pageData: any = {};
public meta: {
id: any,
title: any,
description: any,
keywords: any,
image: any,
} = null;
public components: any[] = [];
constructor(
private dataService: DataServiceService,
private route: ActivatedRoute,
private titleService: Title,
private metaService: Meta,
public translate: TranslateService

) {
translate.addLangs(['el', 'en']);
//translate.setDefaultLang('el');
}

public keywords: string[];


ngOnInit() {
this.route.params.subscribe(params => {
let id = params['id'];
let type = params['type'];
this.getData(id, type);
});
}


getData(idName: string, type ? : string) {
if (type === "page") {
this.dataService.getStaticPage(idName).subscribe(result => {
this.pageData = result;
this.meta = result.meta;
this.components = result.components;
console.log("pageData", this.pageData)
console.log("components", this.components)
this.titleService.setTitle(this.meta.title[this.translate.currentLang]);



this.keywords = this.meta.keywords.map(keyword => keyword[this.translate.currentLang]);
const keywordsContent = this.keywords.filter(keyword => keyword).join(', ');
this.metaService.addTag({
name: 'description',
content: this.meta.description[this.translate.currentLang]
});
this.metaService.addTag({
name: 'keywords',
content: keywordsContent
});
this.metaService.addTag({
property: 'og:image',
content: this.meta.image
});

});
} else {
this.dataService.getAnnouncementById(idName).subscribe(result => {
this.pageData = result;
this.meta = result.meta;
this.components = result.components;
console.log("pageData", this.pageData)
console.log("components", this.components)
this.titleService.setTitle(this.meta.title[this.translate.currentLang]);
this.metaService.addTag({
name: 'description',
content: this.meta.description[this.translate.currentLang]
});
});
}

}
}

Continue reading...