Open Closed

Angular Account Public Module Not Working 9.2.4 #9951


User avatar
0
jackmcelhinney created
  • ABP Framework version: v9.2.4
  • UI Type: Angular
  • Database System: EF Core (SQL Server)
  • Tiered (for MVC) or Auth Server Separated (for Angular): no

After upgrading to ABP 9.2.4, the 'My Account' button in the menu now redirects to the MVC's profile management page even though I have the AccountLayoutModule configured. To reproduce, create two new projects, 9.0.2 and 9.2.4. In both:

app.module.ts

...
AccountAdminConfigModule.forRoot(),
AccountPublicConfigModule.forRoot(),
AccountLayoutModule.forRoot(),
...

app-routing.module.ts

{
    path: 'account',
    loadChildren: () => import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy()),
},

In 9.0.2, clicking 'My Account' navigates to http://localhost:4200/account/manage, while in 9.2.4, a new tab opens with https://localhost:44305/Account/Manage. This results in custom styles and changes to manageProfileTabsService not applying. Please let me know if you are able to reproduce this issue and if there is a workaround.


3 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent
    • In ABP Angular UI, the "My Account" button should route to the Angular account management page (/account/manage) if the Angular Account Public Module is properly configured. Your configuration in app.module.ts and app-routing.module.ts is correct for this purpose.

    • In ABP 9.2.4, if clicking "My Account" opens the MVC profile management page (/Account/Manage) in a new tab, this indicates that the menu item is still pointing to the backend URL instead of the Angular route. This can happen if the menu configuration is not updated to use the Angular route, or if the default menu provider logic has changed in recent ABP versions.

    Workaround: You can override the menu item for "My Account" to ensure it points to the Angular route. Add the following code to your Angular application's startup (e.g., in app.component.ts or a dedicated module):

    import { eIdentityComponents, IdentityConfigModule } from '@volo/abp.ng.identity/config';
    import { eAccountComponents, AccountConfigModule } from '@volo/abp.ng.account/public/config';
    import { eLayoutMenuNames, MenuService } from '@abp/ng.theme.shared';
    
    export class AppComponent {
      constructor(private menu: MenuService) {
        this.menu.patch(eLayoutMenuNames.Main, {
          items: [
            {
              id: 'AbpAccount.MyAccount',
              text: 'My Account',
              icon: 'fa fa-user',
              order: 1000,
              route: '/account/manage', // Ensure this points to Angular route
            },
          ],
        });
      }
    }
    
    • This will override the default "My Account" menu item to use the Angular route, ensuring your customizations and styles apply.

    • If you are using a commercial template or LeptonX, ensure that AccountLayoutModule.forRoot() is included in your app.module.ts as you have done.

    • If you have custom menu providers in the backend, ensure they do not override the Angular route with the MVC URL.

    Summary:
    This behavior is reproducible and is due to the menu item pointing to the backend URL. Overriding the menu item in Angular to use the correct route resolves the issue.

    Sources:

    • https://abp.io/docs/latest/framework/ui/angular/account-module

    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
    1
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hello,

    This answer may solve your problem: https://abp.io/qa/questions/9674/3a1b61b3-1e0a-ab46-a3ae-8dd97adc6a0d If your application is using the standalone structure, you need to use the providers array in app.config.ts file instead.

    You can let us know if you need further assistance. Thank you for your cooperation.

  • User Avatar
    0
    jackmcelhinney created

    Thanks that resolved it.

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 23, 2025, 10:47