Facing issues while customising the SIdebars with latest update of ABP Studio. #9819

13 Answer(s)

• 

  0

  AI-Bot created 6 days ago

  Support Team ABP Agent

  To use LeptonX components (like <lpx-navbar>, <lpx-footer>, etc.) in a custom layout with the new ABP Studio standalone API-based configuration (app.config.ts), you must ensure that the LeptonX modules are properly registered in the providers array, since standalone configuration does not use NgModules in the traditional way.

  Here's how you can resolve the issue:

  1. Instead of importing LeptonX modules in app.config.ts as you would in app.module.ts, you need to add them to the providers array using the provide* functions exported by those modules.

  2. For LeptonX, use the provideLpxSideMenuLayout() and provideLpxResponsive() (if needed) functions.

  Example for app.config.ts:

  import { ApplicationConfig } from '@angular/core';
  import { provideLpxSideMenuLayout } from '@volosoft/ngx-lepton-x/layouts';
  import { provideLpxResponsive } from '@volosoft/ngx-lepton-x.core'; // optional
  
  export const appConfig: ApplicationConfig = {
    providers: [
      // ...other providers
      provideLpxSideMenuLayout(),
      provideLpxResponsive(), // only if you use lpxResponsive directive
    ]
  };
  

  3. Remove any direct module imports (like LpxSideMenuLayoutModule) from app.config.ts, as they are not compatible with standalone API-based configuration.

  4. Ensure your custom layout component is declared as a standalone component and imports the necessary LeptonX components in its imports array.

  Example:

  import { Component } from '@angular/core';
  import { LpxNavbarComponent, LpxFooterComponent } from '@volosoft/ngx-lepton-x/components';
  
  @Component({
    selector: 'app-custom-layout',
    standalone: true,
    imports: [LpxNavbarComponent, LpxFooterComponent /*, ...other LeptonX components*/],
    templateUrl: './custom-layout.component.html',
  })
  export class CustomLayoutComponent {}
  

  5. Use the LeptonX components in your template as before:

  <lpx-navbar></lpx-navbar>
  <!-- ... -->
  <lpx-footer></lpx-footer>
  

  By registering the LeptonX providers and importing the components in your standalone component, the LeptonX elements will render correctly in the UI.

  Sources:

  • https://abp.io/docs/latest/framework/ui/angular/component-replacement?_redirected=B8ABF606AA1BDF5C629883DF1061649A#how-to-replace-a-layout
  • https://github.com/abpio/abp-commercial-docs/blob/dev/en/themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md

  ---

  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.

  Save Cancel
• 

  0

  abpdevPro created 5 days ago

  with this response of AI,

  import { LpxNavbarComponent, LpxFooterComponent } from '@volosoft/ngx-lepton-x/components';

  we dont have @volosoft/ngx-lepton-x/components

  and unable to find this too import { provideLpxResponsive } from '@volosoft/ngx-lepton-x.core'; // optional

  Please help me in this.

  Save Cancel
• 

  0

  abpdevPro created 5 days ago

  [AI-Bot] said: To use LeptonX components (like <lpx-navbar>, <lpx-footer>, etc.) in a custom layout with the new ABP Studio standalone API-based configuration (app.config.ts), you must ensure that the LeptonX modules are properly registered in the providers array, since standalone configuration does not use NgModules in the traditional way.

  Here's how you can resolve the issue:

  1. Instead of importing LeptonX modules in app.config.ts as you would in app.module.ts, you need to add them to the providers array using the provide* functions exported by those modules.

  2. For LeptonX, use the provideLpxSideMenuLayout() and provideLpxResponsive() (if needed) functions.

  Example for app.config.ts:

  import { ApplicationConfig } from '@angular/core'; 
  import { provideLpxSideMenuLayout } from '@volosoft/ngx-lepton-x/layouts'; 
  import { provideLpxResponsive } from '@volosoft/ngx-lepton-x.core'; // optional 
   
  export const appConfig: ApplicationConfig = { 
    providers: [ 
      // ...other providers 
      provideLpxSideMenuLayout(), 
      provideLpxResponsive(), // only if you use lpxResponsive directive 
    ] 
  }; 
  

  3. Remove any direct module imports (like LpxSideMenuLayoutModule) from app.config.ts, as they are not compatible with standalone API-based configuration.

  4. Ensure your custom layout component is declared as a standalone component and imports the necessary LeptonX components in its imports array.

  Example:

  import { Component } from '@angular/core'; 
  import { LpxNavbarComponent, LpxFooterComponent } from '@volosoft/ngx-lepton-x/components'; 
   
  @Component({ 
    selector: 'app-custom-layout', 
    standalone: true, 
    imports: [LpxNavbarComponent, LpxFooterComponent /*, ...other LeptonX components*/], 
    templateUrl: './custom-layout.component.html', 
  }) 
  export class CustomLayoutComponent {} 
  

  5. Use the LeptonX components in your template as before:

  <lpx-navbar></lpx-navbar> 
  <!-- ... --> 
  <lpx-footer></lpx-footer> 
  

  By registering the LeptonX providers and importing the components in your standalone component, the LeptonX elements will render correctly in the UI.

  Sources:

  • https://abp.io/docs/latest/framework/ui/angular/component-replacement?_redirected=B8ABF606AA1BDF5C629883DF1061649A#how-to-replace-a-layout
  • https://github.com/abpio/abp-commercial-docs/blob/dev/en/themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md

  ---

  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.

  with this response of AI,

  import { LpxNavbarComponent, LpxFooterComponent } from '@volosoft/ngx-lepton-x/components';

  we dont have @volosoft/ngx-lepton-x/components

  and unable to find this too import { provideLpxResponsive } from '@volosoft/ngx-lepton-x.core'; // optional

  Please help me in this.

  Save Cancel
• 

  0

  abpdevPro created 5 days ago

  Can we get an quick response on this thread.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 5 days ago

  Support Team Angular Expert

  Hello,

  You can refer to this up-to-date documentation for custom layout usage for lepton-x components: https://abp.io/docs/latest/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout

  Other than that I can replace the navbar and footer using this technique as it was the same in the previous versions:

  export class AppComponent {
    replacableComponent = inject(ReplaceableComponentsService);
  
    constructor() {
      this.replacableComponent.add({
        key: eThemeLeptonXComponents.Navbar,
        component: MyNavbar,
      });
      this.replacableComponent.add({
        key: eThemeLeptonXComponents.Footer,
        component: MyFooter,
      });
    }
  }
  

  

  If you think that your problem is something else, I can assist you further.

  Save Cancel
• 

  0

  abpdevPro created 5 days ago

  You can refer to this up-to-date documentation for custom layout usage for lepton-x components: https://abp.io/docs/latest/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout

  I followed the article and made the imports according to that, but still it's not working,

  I mean unable to see the lpx components in the UI like lpx-navbar, lpx-settings.

  Can we do one approach, will provide my code snippets how I am implementing the Customisations of the sidebar and you can better tell us how to fix this.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 5 days ago

  Support Team Angular Expert

  Sure, that would be the best if you could provide a minimal example through my e-mail address: sumeyye.kurtulus@volosoft.com.

  Save Cancel
• 

  0

  abpdevPro created 4 days ago

  Following the latest doucmentation, I am able to resolve the issue, now my leptonX components are working fine,

  But i am encountering an issue with this,

  we are getting two filter menus, which we don't want.

  

  Can you guide me how to solve this issue.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 4 days ago

  Support Team Angular Expert

  Hello again, I am glad that your problems are almost resolved. Could you clarify that you do not duplicate the theme providers in your app.config.ts?

  //...
  providers: [
    provideThemeLeptonX(),
    provideSideMenuLayout(),
    //You need to remove these if you have them
    //importProvidersFrom([
      //ThemeLeptonxModule.forRoot(),
      //SideMenuLayoutModule.forRoot()
    //])
  ]
  //...
  

  Save Cancel
• 

  0

  abpdevPro created 4 days ago

  [sumeyye.kurtulus] said: Hello again, I am glad that your problems are almost resolved. Could you clarify that you do not duplicate the theme providers in your app.config.ts?

  //... 
  providers: [ 
    provideThemeLeptonX(), 
    provideSideMenuLayout(), 
    //You need to remove these if you have them 
    //importProvidersFrom([ 
      //ThemeLeptonxModule.forRoot(), 
      //SideMenuLayoutModule.forRoot() 
    //]) 
  ] 
  //... 
  

  no this is my app.config.ts code

  import { provideAbpCore, SubscriptionService, withOptions } from '@abp/ng.core';
  import { provideAbpOAuth } from '@abp/ng.oauth';
  import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
  import { provideFeatureManagementConfig } from '@abp/ng.feature-management';
  import {
    provideAbpThemeShared,
    withValidationBluePrint,
    withHttpErrorConfig,
  } from '@abp/ng.theme.shared';
  import { provideIdentityConfig } from '@volo/abp.ng.identity/config';
  import { provideCommercialUiConfig } from '@volo/abp.commercial.ng.ui/config';
  import { provideAccountAdminConfig } from '@volo/abp.ng.account/admin/config';
  import { provideAccountPublicConfig } from '@volo/abp.ng.account/public/config';
  import { provideGdprConfig, withCookieConsentOptions } from '@volo/abp.ng.gdpr/config';
  import { provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config';
  import { provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config';
  import { registerLocale } from '@volo/abp.ng.language-management/locale';
  import { provideSaasConfig } from '@volo/abp.ng.saas/config';
  import { provideTextTemplateManagementConfig } from '@volo/abp.ng.text-template-management/config';
  import { provideOpeniddictproConfig } from '@volo/abp.ng.openiddictpro/config';
  import { HttpErrorComponent, provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
  import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
  import { provideLogo, withEnvironmentOptions } from '@volo/ngx-lepton-x.core';
  import { ApplicationConfig } from '@angular/core';
  import {  importProvidersFrom } from '@angular/core';
  import { provideAnimations } from '@angular/platform-browser/animations';
  import { provideRouter } from '@angular/router';
  import { environment } from '../environments/environment';
  import { APP_ROUTES } from './app.routes';
  import { APP_ROUTE_PROVIDER } from './route.provider';
  import { CODE_STANDARDS_CODE_STANDARD_ROUTE_PROVIDER } from './code-standards/code-standard/providers/code-standard-route.provider';
  import { CODE_VERSIONS_CODE_VERSION_ROUTE_PROVIDER } from './code-versions/code-version/providers/code-version-route.provider';
  import { JURISDICTIONS_JURISDICTION_ROUTE_PROVIDER } from './jurisdictions/jurisdiction/providers/jurisdiction-route.provider';
  import {
    CUSTOM_LAYOUT_PROVIDERS,
    myDynamicLayouts,
  } from './shared/layouts/custom-application-layout/custom-application-layout';
  
  
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
  import { ThemeSharedModule } from '@abp/ng.theme.shared';
  import { CoreModule } from '@abp/ng.core';
  import { ThemeLeptonXModule } from '@volosoft/abp.ng.theme.lepton-x';
  import { SideMenuLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/layouts';
  import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account';
  import { LpxSideMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts';
  import { LpxResponsiveModule } from '@volo/ngx-lepton-x.core';
  import { IdentityConfigModule } from '@volo/abp.ng.identity/config';
  import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config';
  import { GdprConfigModule } from '@volo/abp.ng.gdpr/config';
  import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideRouter(APP_ROUTES),
      APP_ROUTE_PROVIDER,
      CUSTOM_LAYOUT_PROVIDERS,
      
      // Import all required modules for LeptonX components
      importProvidersFrom(CommonModule),
      importProvidersFrom(FormsModule),
      importProvidersFrom(NgbModule),
      importProvidersFrom(ThemeSharedModule),
      importProvidersFrom(CoreModule),
      importProvidersFrom(ThemeLeptonXModule.forRoot()),
      importProvidersFrom(SideMenuLayoutModule.forRoot()),
      importProvidersFrom(AccountLayoutModule.forRoot()),
      importProvidersFrom(LpxSideMenuLayoutModule),
      importProvidersFrom(LpxResponsiveModule),
      importProvidersFrom(IdentityConfigModule),
      importProvidersFrom(AccountAdminConfigModule),
      importProvidersFrom(GdprConfigModule),
      importProvidersFrom(AuditLoggingConfigModule),
      
      provideAnimations(),
      
  
      provideAbpCore(
        withOptions({
          dynamicLayouts: myDynamicLayouts, // Essential for dynamic layout switching
          environment,
          registerLocaleFn: registerLocale(),
        })
      ),
      
      provideAbpOAuth(),
      provideIdentityConfig(),
      provideSettingManagementConfig(),
      provideFeatureManagementConfig(),
      provideAccountAdminConfig(),
      provideAccountPublicConfig(),
      provideCommercialUiConfig(),
      provideThemeLeptonX(),
      provideSideMenuLayout(),
      provideAbpThemeShared(
        withHttpErrorConfig({
          errorScreen: {
            component: HttpErrorComponent,
            forWhichErrors: [401, 403, 404, 500],
            hideCloseIcon: true,
          },
        }),
        withValidationBluePrint({
          wrongPassword: 'Please choose 1q2w3E*',
        })
      ),
      provideGdprConfig(
        withCookieConsentOptions({
          cookiePolicyUrl: '/gdpr-cookie-consent/cookie',
          privacyPolicyUrl: '/gdpr-cookie-consent/privacy',
        })
      ),
      provideLanguageManagementConfig(),
      provideSaasConfig(),
      provideAuditLoggingConfig(),
      provideOpeniddictproConfig(),
      provideTextTemplateManagementConfig(),
      CODE_STANDARDS_CODE_STANDARD_ROUTE_PROVIDER,
      CODE_VERSIONS_CODE_VERSION_ROUTE_PROVIDER,
      JURISDICTIONS_JURISDICTION_ROUTE_PROVIDER,
      SubscriptionService
    ],
  };
  
  

  Save Cancel
• 

  0

  sumeyye.kurtulus created 4 days ago

  Support Team Angular Expert

  Could you try again after removing one of these providers

  // You can keep this
      provideThemeLeptonX(),
      provideSideMenuLayout(),
      
      // You can remove those
      importProvidersFrom(ThemeLeptonXModule.forRoot()),
      importProvidersFrom(SideMenuLayoutModule.forRoot()),
  

  Save Cancel
• 

  0

  abpdevPro created 3 days ago

  Hi Thanks, we are done, Need one advice :

  How to implement this in our custom layout component.

  

  Save Cancel
• 

  0

  sumeyye.kurtulus created 3 days ago

  Support Team Angular Expert

  You can follow this documentation in order to manage the custom layout structure https://abp.io/docs/latest/framework/ui/angular/component-replacement#how-to-replace-a-layout

  Save Cancel