Lepton Theme, Angular CSS Ordering Issue #4025

2 Answer(s)

• 

  1

  muhammedaltug created 2 years ago

  Hello,

  I opened an internal issue about this bug. For now, you can avoid this problem with the following code

  
  import { DOM_STRATEGY } from '@abp/ng.core';
  import { LayoutStateService } from '@volo/abp.ng.theme.lepton';
  import { APP_INITIALIZER, NgModule } from '@angular/core'
  
  @NgModule({
    // other properties
    providers: [
      // other providers
      {
        provide: APP_INITIALIZER,
        multi: true,
        deps: [LayoutStateService],
        useFactory: subscribeThemeStyleLoad,
      },
    ]
  })
  export class AppModule {}
  
  function subscribeThemeStyleLoad(layoutStateService: LayoutStateService) {
    return () => {
      changeStyleOrder();
      layoutStateService.get$('style').subscribe(() => {
        changeStyleOrder();
      });
    };
  }
  
  function changeStyleOrder() {
    const target = document.querySelector<HTMLElement>('style#lepton-styles');
    const leptonStyle = document.querySelector<HTMLElement>('link[href^=lepton]');
    const strategy = DOM_STRATEGY.BeforeElement(target);
    strategy.insertElement(leptonStyle);
  }
  
  

  Save Cancel
• 

  0

  yushafizalyusri@gmail.com created 2 years ago

  Thank you @muhammedaltug. Your fix works great.

  Save Cancel