- 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)
-
0
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 inapp.module.ts
andapp-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 yourapp.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.
-
1
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 inapp.config.ts
file instead.You can let us know if you need further assistance. Thank you for your cooperation.
-
0
Thanks that resolved it.