Open Closed

Adding Angular Resolver to Exists UsersComponent #9634


User avatar
0
raltinsoy created

Hello, I customize UsersComponent under Administrator -> Identity Management -> Users.

this.replaceableComponents.add({ component: UserComponent, key: eIdentityComponents.Users, });

I need to add resolver like below to routing.

RouterModule.forRoot([ { path: 'detail/:id', component: HeroDetailComponent, resolve: { hero: HeroResolver } } ])

How can I do it? Should I rewrite IdentityRoutingModule? If so, how?


8 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    To add a resolver to the route for a replaced UsersComponent in ABP Angular, you need to override the route configuration for the Identity module. The ABP Angular modules register their own routes, so to customize them (e.g., to add a resolver), you must redefine the relevant route in your application's routing module.

    Here’s how you can do it:

    1. Create Your Resolver
      Implement your resolver as a standard Angular service:

    import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; import { UserService } from './user.service';

    @Injectable({ providedIn: 'root' }) export class UserResolver implements Resolve

     resolve(route: ActivatedRouteSnapshot): Observable<any> {
       const id = route.paramMap.get('id');
       return this.userService.getUserById(id);
     }
    

    }

    
    2. **Override the Route in Your App Routing**  
       In your `app-routing.module.ts`, add a route for the user detail with the resolver:
       ```typescript
    import { NgModule } from '@angular/core';
       import { RouterModule, Routes } from '@angular/router';
       import { UserComponent } from './path-to-your-user-component';
       import { UserResolver } from './path-to-your-user-resolver';
    
       const routes: Routes = [
         // ...other routes
         {
           path: 'identity/users/detail/:id',
           component: UserComponent,
           resolve: { user: UserResolver }
         }
       ];
    
       @NgModule({
         imports: [RouterModule.forRoot(routes)],
         exports: [RouterModule]
       })
       export class AppRoutingModule {}
    
    1. Disable the Default Route (Optional but Recommended)
      If you want to fully control the routing, you may need to prevent the default Identity module routes from being registered. You can do this by not importing the IdentityRoutingModule in your app, or by ensuring your custom route takes precedence.

    2. Use the Resolved Data in Your Component
      In your UserComponent, access the resolved data:

    import { ActivatedRoute } from '@angular/router';

    export class UserComponent { constructor(private route: ActivatedRoute) { this.route.data.subscribe(data => { console.log(data.user); // resolved user data }); } }

    
    **Summary:**  
    You do not need to rewrite the entire `IdentityRoutingModule`. Instead, add your custom route with the resolver in your app's routing module. Angular will use your route when the path matches, and you can use the resolver as needed.
    
    Sources:
    - [ABP Angular Component Replacement](https://abp.io/docs/latest/framework/ui/angular/component-replacement)
    
    
    ---
    _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
    raltinsoy created

    How can I override IdentityRoutingModule? I want to add resolve like below. But I did not import Identity Module source code.

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

    Hello,

    If your goal is simply to display a detail page based on the user ID, there’s no need to override the IdentityRoutingModule. Instead, you can create a UserResolver as shown below:

    @Injectable({ providedIn: 'root' })
    export class UserResolver implements Resolve<IdentityUserDto> {
      private userService = inject(IdentityUserService);
    
      resolve(route: ActivatedRouteSnapshot): Observable<IdentityUserDto> {
        const id = route.paramMap.get('id');
        if (!id) {
          throw new Error('User ID is required');
        }
        return this.userService.get(id);
      }
    }
    

    You can then use this resolver in your routing configuration like so:

    const routes: Routes = [
      {
        path: 'identity',
        children: [
          {
            path: 'users/detail/:id',
            component: UserDetailComponent,
            resolve: { user: UserResolver },
          },
          {
            path: '',
            loadChildren: () =>
              import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy()),
          },
        ],
      },
    
      // Alternative approach [#1](https://abp.io/QA/Questions/1):
      // {
      //   path: 'identity',
      //   loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy()),
      // },
      // {
      //   path: 'identity/users/detail/:id',
      //   component: UserDetailComponent,
      //   resolve: { user: UserResolver },
      // },
    
      // Alternative approach [#2](https://abp.io/QA/Questions/2):
      // {
      //   path: 'users/:id',
      //   component: UserDetailComponent,
      //   title: 'New Users',
      //   resolve: { user: UserResolver },
      // },
    ];
    
    @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
    })
    export class AppRoutingModule {}
    

    Feel free to reach out if you need any further clarification or assistance.

  • User Avatar
    0
    raltinsoy created

    I need a resolver for the identity/user route. I believe I need to override the IdentityRoutingModule.

    I found this support question: https://abp.io/support/questions/5639/How-to-change-saastenant-route-in-angular. I tried to apply the same approach, but I couldn't manage to replace the route.

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

    I see your point now. By this means, you may not even need to replace the UsersComponent Here is how you could achieve this:

    //my-identity-routing.module.ts
    import { RouterOutletComponent, authGuard, permissionGuard } from '@abp/ng.core';
    import { NgModule } from '@angular/core';
    import { Routes, RouterModule } from '@angular/router';
    import { identityExtensionsResolver } from '@volo/abp.ng.identity';
    import { UserDetailComponent } from './user-detail/user-detail.component';
    import { UserResolver } from './my-users/users.resolver';
    
    const routes: Routes = [
      { path: '', redirectTo: 'roles', pathMatch: 'full' },
      {
        path: '',
        component: RouterOutletComponent,
        canActivate: [authGuard, permissionGuard],
        resolve: [identityExtensionsResolver],
        children: [
          {
            path: 'users/:id',
            component: UserDetailComponent,
            title: 'AbpIdentity::Users',
            resolve: { user: UserResolver },
          },
        ],
      },
    ];
    
    @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule],
    })
    export class MyIdentityRoutingModule {}
    
    //my-identity.module.ts
    import { IdentityModule } from '@volo/abp.ng.identity';
    import { MyIdentityRoutingModule } from './my-identity-routing.module';
    import { SharedModule } from './shared/shared.module';
    import { NgModule } from '@angular/core';
    
    @NgModule({
      declarations: [],
      imports: [IdentityModule, SharedModule, MyIdentityRoutingModule],
      exports: [MyIdentityRoutingModule],
    })
    export class MyIdentityModule {}
    

    Then in your app-routing.module.ts

    {
        path: 'identity',
        loadChildren: () => import('./my-identity.module').then(m => m.MyIdentityModule),
      },
      // {
      //   path: 'identity',
      //   loadChildren: () => import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy()),
      // },
    
  • User Avatar
    0
    raltinsoy created

    Thank you for your response. The resolver on 'users/user-detail/:id' works very well, but 'users' does not. I think I need to remove the existing 'users' route, but I haven't been able to manage it.

    {
      path: 'users',
      component: ReplaceableRouteContainerComponent,
      data: {
        requiredPolicy: 'AbpIdentity.Users',
        replaceableComponent: {
          key: eIdentityComponents.Users,
          defaultComponent: UsersComponent,
        } as ReplaceableComponents.RouteData<UsersComponent>,
      },
      title: "AbpIdentity::Users",
      resolve: { 'hasDeclarationModule': hasDeclarationModuleResolver } //Does not work
    },
    {
      path: 'users/user-detail/:id',
      component: ReplaceableRouteContainerComponent,
      data: {
        requiredPolicy: 'AbpIdentity.Users',
        replaceableComponent: {
          key: 'Identity.UserDetailComponent',
          defaultComponent: UserDetailComponent,
        } as ReplaceableComponents.RouteData<UserDetailComponent>,
      },
      title: "AbpIdentity::Users",
      resolve: { 'hasDeclarationModule': hasDeclarationModuleResolver } //Does work
    },
    
  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    This might be due to me unintentionally misleading you about importing IdentityModule for MyIdentityModule.

    If removing that import doesn’t conflict with your requirements, things should work as expected.

    //my-identity.module.ts
    import { MyIdentityRoutingModule } from './my-identity-routing.module';
    import { SharedModule } from './shared/shared.module';
    import { NgModule } from '@angular/core';
    
    @NgModule({
      declarations: [],
      imports: [SharedModule, MyIdentityRoutingModule],
      exports: [MyIdentityRoutingModule],
    })
    export class MyIdentityModule {}
    
  • User Avatar
    0
    raltinsoy created

    Thank you for your response, it works like a charm.

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 August 28, 2025, 08:29