Bug: withThemeLeptonXOptions breaks LeptonX settings menu localization in Angular #10749

5 Answer(s)

• 

  0

  AI-Bot created 3 months ago

  Support Team ABP Agent

  • You’ve already found the correct workaround for ABP 10.1.1 + Angular + LeptonX: ensure the ABP translation provider stays the active one after calling provideThemeLeptonX(withThemeLeptonXOptions(...)), because that call chain ends up registering a translate service/provider that takes precedence and makes LeptonX fall back to its default (English) labels in the settings context menu.

  • Use this in your app.config.ts (or wherever you define Angular providers), keeping ABP’s translate provider last:

  import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
  // or @abp/ng.theme.lepton-x depending on your package
  import { LPX_TRANSLATE_PROVIDER } from '@volosoft/ngx-lepton-x'; // your workaround
  
  export const appConfig = {
    providers: [
      provideThemeLeptonX(
        withThemeLeptonXOptions({
          defaultTheme: 'dim',
        }),
      ),
  
      // Ensure LeptonX uses ABP's translation pipeline (fixes settings menu localization)
      LPX_TRANSLATE_PROVIDER,
    ],
  };
  

  • What to do “on ABP side”: this should be fixed by adjusting provider registration order inside the implementation of withThemeLeptonXOptions() / provideThemeLeptonX() so that it doesn’t override ABP’s translate service (or so it re-exports/aliases ABP’s translation service instead of registering a different default). I can’t verify the exact internal source from the indexed repos available in my tools (no repo code match found for these Angular symbols), so I can’t point to the exact file/line to change.

  • If you want this officially addressed, please open a support ticket / issue with your minimal reproduction and the provider-order diagnosis; include that the workaround is to re-add LPX_TRANSLATE_PROVIDER after provideThemeLeptonX(...).

  Links (validated):

  • https://abp.io/docs/10.1/ui-themes/lepton-x/angular/how-to-change-default-theme-option
  • https://abp.io/docs/latest/framework/ui/angular/theme-configurations

  ---

  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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  papusa created 3 months ago

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 3 months ago

  Support Team Fullstack Developer

  Hi,

  You're right, this is a provider-order bug on our side. When you pass withThemeLeptonXOptions(...), that feature internally calls provideLpx(...) again, which re-registers the default (English) translate service after the ABP one. Angular DI keeps the last provider for a given token, so the default service wins and the settings menu ("General Settings", "Language Options", ...) falls back to its hardcoded English labels.

  Your workaround is the right approach. Just import LPX_TRANSLATE_PROVIDER from @volosoft/abp.ng.theme.lepton-x and add it after provideThemeLeptonX(...) so the ABP translate service stays the active one:

  import {
    provideThemeLeptonX,
    withThemeLeptonXOptions,
    LPX_TRANSLATE_PROVIDER,
  } from '@volosoft/abp.ng.theme.lepton-x';
  
  providers: [
    provideThemeLeptonX(
      withThemeLeptonXOptions({
        defaultTheme: 'dim',
      }),
    ),
    LPX_TRANSLATE_PROVIDER,
  ]
  

  We'll fix this inside provideThemeLeptonX in the next LeptonX release so the extra provider won't be needed.

  Thanks

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel

  1
• 

  0

  papusa created 3 months ago

  Thank you

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  maliming created 3 months ago

  Support Team Fullstack Developer

  👍

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel