Hi team,
I am using the ABP Angular frontend template. When the backend is offline or not reachable, the browser tab title unexpectedly displays "MyProjectName".
I have already set the correct app title ("pro") in index.html.
The localization key AppName is configured correctly on the backend and browser title works fine when the backend is available. Frontend environment.ts files are also updated.
I also attempted to override the title via document.title = 'pro' in both main.ts and AppComponent, including using setTimeout() and even APP_INITIALIZER, but none of those prevent "MyProjectName" from showing during backend unavailability.
I can see the project name is overridden from vendor.js
3 Answer(s)
-
0
When the ABP Angular frontend cannot reach the backend, it cannot load the backend localization resources. In this scenario, the Angular app falls back to the default value specified in the code, which is "MyProjectName" for the
AppName
key. This is why you see "MyProjectName" as the browser tab title when the backend is offline, regardless of yourindex.html
or manual overrides.To override this fallback and ensure your desired title ("pro") is always used even when the backend is unavailable, you should provide a frontend-only localization resource for the
AppName
key in your Angular app. This way, the Angular localization system will use your value instead of the default.How to fix:
- In your
app.module.ts
, add a frontend localization entry forAppName
:
import { provideAbpCore, withOptions } from '@abp/ng.core'; @NgModule({ providers: [ provideAbpCore( withOptions({ localizations: [ { culture: 'en', resources: [ { resourceName: 'pro', // Use your resource name texts: { "AppName": "pro" } } ] } ] }), ), ], }) export class AppModule {}
Make sure the
resourceName
matches the one used in your backend (e.g., "pro").This ensures that even if the backend is unreachable, the Angular app will use "pro" for the
AppName
key.
Reference:
This approach is the recommended way to provide fallback localization values for frontend-only scenarios in ABP Angular.
This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.
- In your
-
0
AI answer did not solve the issue
-
0
Hello,
You may try using a
CustomTitleStrategy
that overrides the defaultTitleStrategy
import { Injectable, inject, effect } from '@angular/core'; import { toSignal } from '@angular/core/rxjs-interop'; import { RouterStateSnapshot, TitleStrategy } from '@angular/router'; import { Title } from '@angular/platform-browser'; import { LocalizationService } from '@abp/ng.core'; @Injectable({ providedIn: 'root', }) export class CustomTitleStrategy extends TitleStrategy { protected readonly title = inject(Title); protected readonly localizationService = inject(LocalizationService); protected routerState: RouterStateSnapshot; langugageChange = toSignal(this.localizationService.languageChange$); constructor() { super(); this.title.setTitle('PRO'); // Set a default title effect(() => { // React to language changes if (this.langugageChange()) { this.updateTitle(this.routerState); } }); } override updateTitle(routerState: RouterStateSnapshot) { this.routerState = routerState; const title = this.buildTitle(routerState); const projectName = 'PRO'; // Replace with your project name this.title.setTitle(projectName); if (!title) { return this.title.setTitle(projectName); } const localizedText = this.localizationService.instant({ key: title, defaultValue: title }) + ` | ${projectName}`; this.title.setTitle(localizedText); } }
Then, in your providers array
// app.module.ts or app.config.ts providers: [ //... { provide: TitleStrategy, useExisting: CustomTitleStrategy, }, ],
You can let us know if you need further assistance. Thank you for your cooperation.