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

3 Answer(s)

• 

  0

  AI-Bot created one month ago

  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 {}
  

  2. Make sure the resourceName matches the one used in your backend (e.g., "pro").

  3. This ensures that even if the backend is unreachable, the Angular app will use "pro" for the AppName key.

  Reference:

  • ABP Angular Localization

  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.

  Save Cancel
• 

  0

  Pallabi created one month ago

  AI answer did not solve the issue

  Save Cancel
• 

  0

  sumeyye.kurtulus created one month ago

  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.

  Save Cancel