This code works; you can try it. However, there is no need for the title to be readonly

CustomTitleStrategy

@Injectable({providedIn: 'root'})

export class CustomTitleStrategy extends TitleStrategy {

constructor(private title: Title, private translate:TranslateService) {
    super();
}

updateTitle(routerSnapshot: RouterStateSnapshot) {
    const title = this.buildTitle(routerSnapshot);

    if (title) {
        const translatedTitle = this.translate.instant('titles.site-name') + ' | ' + this.translate.instant(`titles.${title}`);
        this.title.setTitle(translatedTitle);
    } else {
        const translatedTitle = this.translate.instant('titles.site-name');
        this.title.setTitle(translatedTitle);
    }
}

}

In Angular, define a provider to override the default TitleStrategy. Use CustomTitleStrategy as the implementation by specifying it with the provide and useClass properties in the provider configuration

export class CoreModule {
   
    static forRoot(): ModuleWithProviders<CoreModule> {
        return {
            ngModule: CoreModule,
            providers: [
                {
                    provide: TitleStrategy,
                    useClass: CustomTitleStrategy,
                },
            ]
        };
    }
}

language json

"titles": {
     "site-name": "stackoverflow",
     "other": "Other Code"
}