Yes, the app is using LeptonX theme. With help of AI, add the following styles to make scroll bar visible on main Lepton Content:
//Section ABP 9 Lepton 4.1.1 scroll bar fix // WebKit (Chrome, Safari, newer Edge) ::-webkit-scrollbar { width: 8px; height: 8px; display: block; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #888; }
// Firefox
// Ensure the main scrollable containers have overflow properties set .lpx-content { overflow-y: auto !important; overflow-x: hidden !important; /* Fix for Lepton 4.4.1 scrollbar issues */ display: flex; flex-direction: column; height: 100%; max-height: 100vh; position: relative;
/* Force scrollbar visibility */ &::-webkit-scrollbar { width: 8px; height: 8px; display: block !important; opacity: 1 !important; visibility: visible !important; }
&::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; display: block !important; opacity: 1 !important; visibility: visible !important; }
&::-webkit-scrollbar-thumb { background: #aaa; border-radius: 4px; display: block !important; opacity: 1 !important; visibility: visible !important; } }
/* Additional fix for Lepton 4.4.1 - ensure main content area scrolls properly */ .lpx-wrapper { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
Add connection string to Identity Db in Administration Service works. Though after click save button, Angular app somehow automatically navigate to the home page. I comment this line since from that component code, when updating personal info (roles are not updated). There is no need to call refreshAppState().
I did figure out the solution from another project. It's a custom provider export const OVERRIDE_LEPTON_X_USER_MENU_PROVIDERS = [ { provide: APP_INITIALIZER, useFactory: configureUserMenu, deps: [Injector, Router], multi: true, }, ];
export function configureUserMenu(injector: Injector, router: Router) { const userMenu = injector.get(UserMenuService);
return () => {
userMenu.removeItem(eUserMenuItems.LinkedAccounts);
userMenu.removeItem(eUserMenuItems.SecurityLogs);
I am delighted to hear that your problem has been solved.
Can you help me on this thread? https://abp.io/support/questions/9210/ABP-Upgrade-to-911--Click-profile-icon---point-to-auth-server-pages
Our app copied ABP 7.2.3 account and identity source code to Angular project, after revert to the original source code (module style), and fix several compile error. Now the admin menu works as before.
I figured out the reason, I replace the existing code:
export const APP_ROUTE_PROVIDER = [ { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService, AppConfigService], multi: true, }, ];
With: export const APP_ROUTE_PROVIDER = [ provideAppInitializer(() => { configureRoutes(); }), ];
After revert back, there is only one Administration menu, however, when I click Roles or Users menu item, it complains: src_app_identity_identity-routes_ts.js:1 ERROR RuntimeError: NG04014: Invalid configuration of route 'identity/'. The component must be standalone. Notes: The app is converted to standalone mode, and we write our own identity components to replace ABP's identity component.
Thank you so much. I copy the providers section in sample project. Now the DI issue is gone.
Now I got this exception: main.ts:176 RuntimeError: NG0200: Circular dependency in DI detected for ChangeDetectionScheduler. Find more at https://angular.dev/errors/NG0200 at throwCyclicDependencyError (core.mjs:970:11) at R3Injector.hydrate (core.mjs:2316:17) at R3Injector.get (core.mjs:2189:33) at effect (core.mjs:40806:31) at new AbpTitleStrategy (abp-ng.core.mjs:2136:15) at Object.AbpTitleStrategy_Factory [as factory] (abp-ng.core.mjs:2158:23) at core.mjs:2322:47 at runInInjectorProfilerContext (core.mjs:880:9) at R3Injector.hydrate (core.mjs:2321:21) at R3Injector.get (core.mjs:2189:33)
Does the provider sequence matter?
Move CORE_OPTIONS out side provideAbpCore(), that DI exception is gone. I add more providers for other error, there is final version
bootstrapApplication(AppComponent, {
providers: [
provideAppInitializer(appInitializerFactory()),
provideAbpCore(),
{ provide: TitleStrategy, useClass: DefaultTitleStrategy },
importProvidersFrom(AppRoutingModule, ThemeLeptonXModule.forRoot(), ThemeSharedModule),
{
provide: CORE_OPTIONS,
useValue: {
environment,
registerLocaleFn: registerLocale(),
},
},
{
provide: OTHERS_GROUP,
useValue: 'Others', // <-- this string will be used as the group ID
},
{
provide: LPX_LAYOUT_STYLE_FINAL,
useValue: () => {}, // <-- safe default
},
{
provide: TENANT_KEY,
useValue: 'Abp.TenantId',
},
importProvidersFrom(AccountPublicConfigModule.forRoot(), AccountAdminConfigModule.forRoot(), IdentityConfigModule.forRoot(), SaasConfigModule.forRoot()),
provideSettingManagementConfig(),
provideTextTemplateManagementConfig(),
provideOpeniddictproConfig(),
provideAuditLoggingConfig(),
provideLanguageManagementConfig(),
provideAbpOAuth(),
provideRouter(appRoutes),
{ provide: ErrorHandler, useClass: GlobalErrorHandler },
AuditInterceptorProvider,
provideAnimations(),
provideHttpClient(withInterceptorsFromDi())
]
})
.catch(err => console.error(err));
Now the error is: ERROR: TypeError: layoutStyles is not iterable at Object.styleLoadFactory [as useFactory] (volo-ngx-lepton-x.core.mjs:1486:30) at Object.factory (core.mjs:2425:38) at core.mjs:2322:47 at runInInjectorProfilerContext (core.mjs:880:9) at R3Injector.hydrate (core.mjs:2321:21) at R3Injector.get (core.mjs:2189:33) at injectInjectorOnly (core.mjs:1116:40) at ɵɵinject (core.mjs:1122:60) at injectArgs (core.mjs:1253:23) at Object.factory (core.mjs:2425:52)
I use command ng generate @angular/core:standalone to migration the application to stand-alone mode.
The bootstrap generated by above command are as below:
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(BrowserModule, AppRoutingModule, SharedModule, ErrorsModule, RootStoreModule, AppInsightsModule,
// ABP related
CoreModule.forRoot({
environment,
registerLocaleFn: registerLocale(),
}), AbpOAuthModule.forRoot(), AccountAdminConfigModule.forRoot(), AccountPublicConfigModule.forRoot(), IdentityConfigModule.forRoot(), LanguageManagementConfigModule.forRoot(), SaasConfigModule.forRoot(), AuditLoggingConfigModule.forRoot(), OpeniddictproConfigModule.forRoot(), TextTemplateManagementConfigModule.forRoot(), SettingManagementConfigModule.forRoot(), AbpModule),
// MANAGE_PROFILE_TAB_PROVIDER,
APP_ROUTE_PROVIDER,
{ provide: APP_INITIALIZER, useFactory: init_AppConfigService, deps: [Injector, AppConfigService], multi: true },
{ provide: ErrorHandler, useClass: GlobalErrorHandler },
AuditInterceptorProvider,
provideAnimations(),
provideHttpClient(withInterceptorsFromDi())
]
})
.catch(err => console.error(err));
})();
When run the application, there is DI circulation error. So I change code to this:
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(AppRoutingModule, ThemeLeptonXModule.forRoot()),
/* provideAbpCore(
withOptions({
environment,
registerLocaleFn: registerLocale(),
}),
),
*/
provideRouter(appRoutes),
{ provide: ErrorHandler, useClass: GlobalErrorHandler },
AuditInterceptorProvider,
provideAnimations(),
provideHttpClient(withInterceptorsFromDi())
]
})
.catch(err => console.error(err));
})();
I got this exception, I believe LPX_MENU_ITMES is in LPXCoreModule which already imported as provider?
ERROR: NullInjectorError: NullInjectorError: No provider for InjectionToken CORE_OPTIONS! at NullInjector.get (core.mjs:1676:27) at R3Injector.get (core.mjs:2199:33) at R3Injector.get (core.mjs:2199:33) at injectInjectorOnly (core.mjs:1116:40) at Module.ɵɵinject (core.mjs:1122:60) at Object.RestService_Factory [as factory] (abp-ng.core.mjs:56:103) at core.mjs:2322:47 at runInInjectorProfilerContext (core.mjs:880:9) at R3Injector.hydrate (core.mjs:2321:21) at R3Injector.get (core.mjs:2189:33)
If uncomment the lines:
provideAbpCore(
withOptions({
environment,
registerLocaleFn: registerLocale(),
}),
),
The exception is: main.ts:82 RuntimeError: NG0200: Circular dependency in DI detected for ChangeDetectionScheduler. Find more at https://angular.dev/errors/NG0200 at throwCyclicDependencyError (core.mjs:970:11) at R3Injector.hydrate (core.mjs:2316:17) at R3Injector.get (core.mjs:2189:33) at effect (core.mjs:40806:31) at new AbpTitleStrategy (abp-ng.core.mjs:2136:15) at Object.AbpTitleStrategy_Factory [as factory] (abp-ng.core.mjs:2158:23)
