Merge pull request #19022 from abpframework/issue-16482

Page Titles Enhancement

npm/ng-packs/apps/dev-app/src/app/app-routing.module.ts

@@ -31,4 +31,4 @@ const routes: Routes = [
   imports: [RouterModule.forRoot(routes, {})],
   exports: [RouterModule],
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }

npm/ng-packs/packages/account/src/lib/account-routing.module.ts

@@ -35,6 +35,7 @@ const routes: Routes = [
             defaultComponent: LoginComponent,
           } as ReplaceableComponents.RouteData<LoginComponent>,
         },
+        title: 'AbpAccount::Login',
       },
       {
         path: 'register',
@@ -46,6 +47,7 @@ const routes: Routes = [
             defaultComponent: RegisterComponent,
           } as ReplaceableComponents.RouteData<RegisterComponent>,
         },
+        title: 'AbpAccount::Register',
       },
       {
         path: 'forgot-password',
@@ -58,6 +60,7 @@ const routes: Routes = [
             defaultComponent: ForgotPasswordComponent,
           } as ReplaceableComponents.RouteData<ForgotPasswordComponent>,
         },
+        title: 'AbpAccount::ForgotPassword',
       },
       {
         path: 'reset-password',
@@ -70,6 +73,7 @@ const routes: Routes = [
             defaultComponent: ResetPasswordComponent,
           } as ReplaceableComponents.RouteData<ResetPasswordComponent>,
         },
+        title: 'AbpAccount::ResetPassword',
       },
       {
         path: 'manage',
@@ -82,6 +86,7 @@ const routes: Routes = [
             defaultComponent: ManageProfileComponent,
           } as ReplaceableComponents.RouteData<ManageProfileComponent>,
         },
+        title: 'AbpAccount::MyAccount',
       },
     ],
   },
@@ -91,4 +96,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class AccountRoutingModule {}
+export class AccountRoutingModule { }

npm/ng-packs/packages/core/src/lib/core.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
 import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
+import { RouterModule, TitleStrategy } from '@angular/router';
 import { AbstractNgModelComponent } from './abstracts/ng-model.component';
 import { DynamicLayoutComponent } from './components/dynamic-layout.component';
 import { ReplaceableRouteContainerComponent } from './components/replaceable-route-container.component';
@@ -42,6 +42,7 @@ import { SORT_COMPARE_FUNC, compareFuncFactory } from './tokens/compare-func.tok
 import { AuthErrorFilterService } from './abstracts';
 import { DYNAMIC_LAYOUTS_TOKEN } from "./tokens/dynamic-layout.token";
 import { DEFAULT_DYNAMIC_LAYOUTS } from "./constants";
+import { AbpTitleStrategy } from './services/title-strategy.service';
 
 
 const standaloneDirectives = [
@@ -194,6 +195,10 @@ export class CoreModule {
         {
           provide: DYNAMIC_LAYOUTS_TOKEN,
           useValue: options.dynamicLayouts || DEFAULT_DYNAMIC_LAYOUTS
+        },
+        {
+          provide: TitleStrategy,
+          useExisting: AbpTitleStrategy
         }
       ],
     };

npm/ng-packs/packages/core/src/lib/services/title-strategy.service.ts

@@ -0,0 +1,44 @@
+import { Injectable, effect, inject } from '@angular/core';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { TitleStrategy, RouterStateSnapshot } from '@angular/router';
+import { Title } from '@angular/platform-browser';
+import { ConfigStateService } from './config-state.service';
+import { LocalizationService } from './localization.service';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AbpTitleStrategy extends TitleStrategy {
+  protected readonly title = inject(Title);
+  protected readonly configState = inject(ConfigStateService);
+  protected readonly localizationService = inject(LocalizationService);
+  protected routerState: RouterStateSnapshot;
+
+  projectName = toSignal(this.configState.getDeep$('localization.defaultResourceName'), {
+    initialValue: 'MyProjectName',
+  });
+  langugageChange = toSignal(this.localizationService.languageChange$);
+
+  constructor() {
+    super();
+    effect(() => {
+      if (this.langugageChange()) {
+        this.updateTitle(this.routerState);
+      }
+    });
+  }
+
+  override updateTitle(routerState: RouterStateSnapshot) {
+    let title = this.buildTitle(routerState);
+
+    if (!title) {
+      this.title.setTitle(this.projectName());
+      return;
+    }
+
+    this.routerState = routerState;
+
+    const localizedTitle = this.localizationService.instant({ key: title, defaultValue: title });
+    this.title.setTitle(`${localizedTitle} | ${this.projectName()}`);
+  }
+}

npm/ng-packs/packages/identity/src/lib/identity-routing.module.ts

@@ -32,6 +32,7 @@ const routes: Routes = [
             defaultComponent: RolesComponent,
           } as ReplaceableComponents.RouteData<RolesComponent>,
         },
+        title: 'AbpIdentity::Roles',
       },
       {
         path: 'users',
@@ -43,6 +44,7 @@ const routes: Routes = [
             defaultComponent: UsersComponent,
           } as ReplaceableComponents.RouteData<UsersComponent>,
         },
+        title: 'AbpIdentity::Users',
       },
     ],
   },

npm/ng-packs/packages/setting-management/src/lib/setting-management-routing.module.ts

@@ -27,6 +27,7 @@ const routes: Routes = [
         },
       },
     ],
+    title: 'AbpSettingManagement::Settings',
   },
 ];
 
@@ -34,4 +35,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class SettingManagementRoutingModule {}
+export class SettingManagementRoutingModule { }

npm/ng-packs/packages/tenant-management/src/lib/tenant-management-routing.module.ts

@@ -31,6 +31,7 @@ const routes: Routes = [
             defaultComponent: TenantsComponent,
           } as ReplaceableComponents.RouteData<TenantsComponent>,
         },
+        title: 'AbpTenantManagement::Tenants',
       },
     ],
   },
@@ -40,4 +41,4 @@ const routes: Routes = [
   imports: [RouterModule.forChild(routes)],
   exports: [RouterModule],
 })
-export class TenantManagementRoutingModule {}
+export class TenantManagementRoutingModule { }