My Angular application uses server side rendering, and I am dynamically loading the meta tags content from the backend. Despite seeing the proper content in the HTML, Facebook's debugger does not seem to recognize the tags. Has anyone else encountered this issue?
I have attempted to fill the meta tags in the component's onInit function and also tried filling the tags in a resolver.
Create the RoutMetaService service
export class RoutMetaService {
constructor(private title: Title, private meta: Meta) {}
updateTitle(title: string) {
this.title.setTitle(title);
}
updateOgUrl(url: string) {
this.meta.updateTag({ name: 'og:url', content: url });
console.log('updateOgUrl');
}
updateDescription(desc: string) {
this.meta.updateTag({ name: 'description', content: desc });
}
updateKeywords(key: string) {
this.meta.updateTag({ name: 'keywords', content: key });
}
}
Add this code to your routing.module.ts file
{
path: "path name",
component: Your Component,
data: {
title: "Title Page",
description: "Description Meta Tag Content",
ogUrl: "your og url",
keywords: " Keywords Meta Tag Content ",
},
},
Incorporate this code in your typescript components constructor
constructor(
private router: Router,
private activatedRoute: ActivatedRoute,
private routMeta: RoutMetaService
) {}
ngOnInit() {
this.router.events
.pipe(
filter((event: any) => event instanceof NavigationEnd),
map(() => this.activatedRoute),
map((route) => {
while (route.firstChild) route = route.firstChild;
return route;
}),
filter((route) => route.outlet === "primary"),
mergeMap((route) => route.data)
)
.subscribe((event: any) => {
//Updating Description tag dynamically with title
this.routMeta.updateTitle(event["title"]);
//Updating Description tag dynamically with ogUrl
this.routMeta.updateOgUrl(event["ogUrl"]);
//Updating Description tag dynamically with description
this.routMeta.updateDescription(event["description"]);
//Updating Description tag dynamically with keywords
this.routMeta.updateKeywords(event["keywords"]);
});
}
Update your index.html file with the following code
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
Currently, I am integrating fullcalendar 5.5.0 with Angular 10. After migrating from fullcalendar v4 to v5, I noticed an annoying issue where the header for the date before the validRange start is no longer displayed: These are the parameters being used: ...
I am working on a project that involves using Angular2 for the frontend and Nodejs API with 'mssql' NPM package to interact with a Microsoft SQL Server. Everything is functioning as expected, but I'm stuck on one specific task. My challeng ...
I'm working on a code to display the remaining time for generating a random code in the DOM. var count = setInterval(function () { var date = new Date(); var currentSecond = date.getSeconds(); ...
At the moment, I have a sidebar with clickable individual components that trigger API calls to fetch data. However, I've noticed that even when I click off a component to another one, the old component continues to refresh the API data unnecessarily. ...
In Angular, the HttpErrorResponse status is returning 0 instead of the actual status. However, the correct status is being displayed in the browser's network tab. ...
I am facing an issue with a div tag in my HTML file. The code snippet looks like this: <div *ngIf="chat.asReceiver.id != user?.id; else otherParty"> Unfortunately, it always returns the following error: ERROR TypeError: Cannot read propert ...
Currently encountering an issue while trying to integrate firebase-admin into my angular project. Despite my efforts, I am unable to resolve the error that keeps popping up (refer to the screenshot below). https://i.stack.imgur.com/kdCoo.png I attempted ...
In the midst of my evaluation process to ensure that specific values are properly transmitted from one component to another using Angular's custom Output() and EventEmitter(), I am encountering some issues. These values are being sent from the view of ...
I have an application where I retrieve data in a table format. This front end of this application is built on angular7. Now, I need certain column values to be links that when clicked will display a new component. For example: Column1 Column2 ...
Recently, I encountered a small issue with HttpClient when trying to retrieve data from my API: constructor(private http: HttpClient) {} ngOnInit(): void { this.http.get("http://localhost:8080/api/test/test?status=None").subscribe((data)=> ...
I am embarking on a project to develop a cutting-edge (Angular) Single Page Application with a robust (Asp.Net Core) back-end, all while prioritizing security best practices. Here is the blueprint for my plan: The SPA showcases a Login button When the use ...
I am facing a challenge in returning after all calls to an external service are completed. My current code processes through the for loop too quickly and returns prematurely. Using 'promise.all' is not an option here since I require values obtain ...
I am working with Django Rest Framework and Angular 2 to implement a file upload feature. Below is my code structure for handling files. Can anyone point out where I might be going wrong? Any help is greatly appreciated. Thank you! Django file: view cla ...
I am facing a common challenge in Angular / Typescript / JavaScript. I have created a simple class with fields and methods: class Rectangle { width: number; height: number; area(): number { return this.width * this.height; } } Next, I have a ...
I have integrated 6 icons into my Angular application. When a user clicks on an icon, I want the color of that specific icon to change from gray to red. Additionally, when another icon is clicked, the previously selected icon should revert back to gray whi ...
For days, I've been struggling to figure out why my browser console is showing this error. Here's the full stack trace: Unhandled Promise rejection: NG0202: This constructor is not compatible with Angular Dependency Injection because its dependen ...
Currently, I am delving into the world of Angular 8 as a beginner with this framework. In my attempt to design a new user interface with additional elements, I encountered an unexpected linting error after smoothly adding the first two fields. The error m ...
I am struggling to organize the constructor parameters in TypeScript while using TSLINT with Angular9. I am looking for a rule similar to member-ordering that can help me sort them effectively. constructor( // Sort these private readonly router: R ...
My parent Component is structured like this: import { Component} from '@angular/core'; @Component({ selector: 'app-main-parent', template: '', }) export class ParentComponent { constructor(protected service) { ...
My routing setup is structured as follows: Main App-routing module const routes: Routes = [ { path: '', redirectTo: environment.devRedirect, pathMatch: 'full', canActivate: [AuthenticationGuard] }, { path: &a ...