Open Closed

Angular : Browser title shows MyProjectName in case backend not reachable #9770


User avatar
0
Pallabi created

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)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    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 your index.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:

    1. In your app.module.ts, add a frontend localization entry for AppName:
    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 {}
    
    1. Make sure the resourceName matches the one used in your backend (e.g., "pro").

    2. 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.

  • User Avatar
    0
    Pallabi created

    AI answer did not solve the issue

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hello,

    You may try using a CustomTitleStrategy that overrides the default TitleStrategy

    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.

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on September 05, 2025, 09:28