Angular - defining custom TitleStrategy to implement ngx-translation for router title property

I am developing a multilingual application in Angular V16. I am using ngx-translate library.

I would like to implement the multilingual titles for individual routes defined in a Router. To do so, I have been following the steps in this blog post https://itnext.io/manage-angular-page-titles-translation-d1384bbede86

The crucial difference is that in my application, I am implementing this functionality inside a lazyloaded module.

For some reason, the below mentioned solution does not work. I do not receive any errors. The title inside the browser tab is equal to the key for ngx-translate library, which is provided in 'title' property within the routes definition.

Based on the console.log statements inside the CustomTitleStrategy, the instance of CustomTitleStrategy is not created at all. But the import of the file whe CustomTitleStrategy is defined is done, as I see the string 'Imported the class' in the browser console.

I have tried to extend DefaultTitleStrategy instead of TItleStrategy, without success.

Here is the code:

1. CustomTitleStrategy.ts

import { Injectable } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { RouterStateSnapshot, TitleStrategy } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';

console.log('Imported the class'); // the only console log which is printed into the console.
@Injectable({providedIn: 'root'})
export class CustomTitleStrategy extends TitleStrategy {
constructor(
private translateService: TranslateService,
private readonly title: Title
) {
super();
console.log('Inside constructor');
}

updateTitle(routerState: RouterStateSnapshot): void {
const title = this.buildTitle(routerState);
console.log('Inside custom title strategy');
if (title) {
const translatedTitle = this.translateService.instant(title);
this.title.setTitle(translatedTitle);
} else {
this.title.setTitle('App');
}
}
}

1. subModule.module.ts

...
import { TitleStrategy } from '@angular/router';
import { CustomTitleStrategy } from '../shared/services/international-page-title-strategy';
...

@NgModule({
providers: [
{
provide: TitleStrategy,
useClass: CustomTitleStrategy,
},
],
declarations: [
...
]

1. subModule-routing.module.ts

...

const routes: Routes = [
{
path: '',
component: MainComponent,
children: [
{
path: 'dashboard',
component: DashboardComponent,
title: 'titles.dashboard',
},{
path: 'user/',
component: UserDetailsComponent,
title: 'titles.user',
},
...

1. translation files (here, just en.json, same structure for other languages)

...
"titles": {
"dashboard": "Dashboard",
"user": "User",
...


Here is an excerpt from my package.json

"@angular/animations": "16.2.6",
"@angular/cdk": "16.2.4",
"@angular/common": "16.2.6",
"@angular/compiler": "16.2.6",
"@angular/core": "16.2.6",
"@angular/forms": "16.2.6",
"@angular/localize": "16.2.6",
"@angular/material": "^16.2.4",
"@angular/platform-browser": "16.2.6",
"@angular/platform-browser-dynamic": "16.2.6",
"@angular/router": "16.2.6",
"@ngx-translate/core": "15.0.0",
"@ngx-translate/http-loader": "7.0.0",


Thank you in advance for any feedback.

Continue reading...