Open Closed

Cant move users page component to my custom tabs #6316


User avatar
0
Pavlo created
  • ABP Framework version: v7.2.2

  • UI Type: Angular

  • Exception message and full stack trace:
    ERROR NullInjectorError: R3InjectorError(Standalone[UsersTabComponent])[UsersComponent -> UsersComponent -> UsersComponent -> UsersComponent -> UsersComponent]: NullInjectorError: No provider for UsersComponent! at NullInjector.get (core.mjs:7493:27) at R3Injector.get (core.mjs:7914:33) at R3Injector.get (core.mjs:7914:33) at R3Injector.get (core.mjs:7914:33) at R3Injector.get (core.mjs:7914:33) at R3Injector.get (core.mjs:7914:33) at ChainedInjector.get (core.mjs:12084:36) at lookupTokenUsingModuleInjector (core.mjs:3201:39) at getOrCreateInjectable (core.mjs:3246:12) at NodeInjector.get (core.mjs:3511:16)

  • Steps to reproduce the issue:

  • 1.Add tab to profile-manage-tabs:

      {
        name: '::Users',
        order: 4,
        component: UsersTabComponent,
      },
  1. Add tab component itself (reuse html and ts files from identity management (users.component.ts)

@Component({
  selector: 'app-users-tab',
  templateUrl: './users-tab.component.html',
  styleUrls: ['./users-tab.component.scss'],
  standalone: true,
  imports: [
    CommonModule,
    SharedModule,
    TableComponent,
    PageModule,
    IdentityModule,
    UiExtensionsModule,
  ],
  providers: [
    ListService,
    {
      provide: EXTENSIONS_IDENTIFIER,
      useValue: eIdentityComponents.Users,
    },
  ],
})

The main problem:

I am trying to move the users page to my account tabs

When I open the users tab I see nearly nothing except some data in the footer

image.png

If i open users original page and then go to the tab again I will see the button 'add users' and the exception above


11 Answer(s)
  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member
  • User Avatar
    0
    Pavlo created

    Hi, i have done everything that is in this tutorial.
    My other custom tabs work well

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hi,

    Could you please provide detailed step to reproduce the issue or share code snippet.

    Thanks,

  • User Avatar
    0
    Pavlo created

    Yea, of course:
    1.Add new tab to manage-profile-page
    2. Copy users.component ts and html files
    3. paste in your new tab component
    4. check if users table and create user button appeared in your new tab

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hello,

    Is this what you are expecting?

    image.png

    for this I have added Identity module as a Replace Package with source code to existing solution. And added the UsersComponent as a new tab to manage-profile-page. and it looks like this. Please try once.

    Thanks,
    Anjali

  • User Avatar
    0
    Pavlo created

    Yes, you are totally correct, that's what i expect
    Thanks for answer, you replaced all the package, i mean like this?

    image.png
    image.png

    Or just added existing IndentityModule inside another module, for example like this:
    image.png

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hi,

    I have added Acoount module as a project in existing solution like this

    image.png

  • User Avatar
    0
    Pavlo created

    Thanks for answer, can you show me your app-routing.module.ts code, please.

    Also i have one more question:
    When i was ovveriding some componnets, i just created new folder. like here:
    image.png

    Should i move everyting to projects folder?

  • User Avatar
    0
    Pavlo created

    i dont know exactly, but maybe i found the problem.
    I think it's in this section
    image.png

    This happens when i remove it
    image.png

  • User Avatar
    0
    Anjali_Musmade created
    Support Team Member

    Hello,

    I have just followed the link https://docs.abp.io/en/commercial/latest/ui/angular/manage-profile-page-tabs

    1. Created a class manage-profile-tabs.provider.ts and copy the code provided in link and update it like this

    image.png

    1. Add MANAGE_PROFILE_TAB_PROVIDER to app.module.ts like this

    image.png

    it works for me.

  • User Avatar
    0
    Pavlo created

    Strange, did the same but it didn't work.

    Ok, thanks a lot

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.3.0-preview. Updated on April 11, 2025, 10:10