Blank page #9965

7 Answer(s)

• 

  0

  AI-Bot created 21 days ago

  Support Team ABP Agent

  • Ensure you have installed the correct LeptonX theme package for Angular. For the open-source version, run:

  npm install @abp/ng.theme.lepton-x@preview
  

  or

  yarn add @abp/ng.theme.lepton-x@preview
  

  • Update your angular.json file. In the styles array, remove the default Bootstrap style and add:

  "node_modules/@volo/ngx-lepton-x.lite/styles/sidemenu-layout.min.css",
    "node_modules/bootstrap-icons/font/bootstrap-icons.css"
  

  • In your app.module.ts, remove ThemeBasicModule and import:

  import { ThemeLeptonXModule } from '@abp/ng.theme.lepton-x';
    import { SideMenuLayoutModule } from '@abp/ng.theme.lepton-x/layouts';
  
    @NgModule({
      imports: [
        ThemeLeptonXModule.forRoot(),
        SideMenuLayoutModule.forRoot(),
        // other imports
      ],
      // ...
    })
    export class AppModule {}
  

  • If you use Resource Owner Password Flow, also import:

  import { AccountLayoutModule } from '@abp/ng.theme.lepton-x/account';
  
    @NgModule({
      imports: [
        AccountLayoutModule.forRoot(),
        // ...
      ],
      // ...
    })
    export class AppModule {}
  

  • After making these changes, stop the Angular dev server if running, delete node_modules, and reinstall dependencies:

  rm -rf node_modules
    yarn
  

  or

  npm install
  

  • Restart the Angular dev server:

  yarn start
  

  or

  npm start
  

  If you still see a blank page, double-check that all theme-related modules are correctly imported and that the styles are properly referenced in angular.json.

  Sources

  • https://abp.io/community/articles/z0fqq5di
  • https://abp.io/docs/latest/ui-themes/lepton-x-lite/angular

  ---

  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

  maliming created 21 days ago

  Support Team Fullstack Developer

  hi

  Are there any error messages in the Browser console?

  Thanks.

  Save Cancel
• 

  0

  alrashdi1989 created 21 days ago

  [maliming] said: hi

  Are there any error messages in the Browser console?

  Thanks.

  No errors the weird thing that it works on some of the browsers but others don't

  Save Cancel
• 

  0

  maliming created 21 days ago

  Support Team Fullstack Developer

  hi

  What is the output of the angular yarn start command?

  Thanks.

  Save Cancel
• 

  0

  alrashdi1989 created 21 days ago

  PS C:\Users\d3-1293\Documents\MOD-GIT\Attendence\Mod.Attendence.Frontend> yarn start yarn run v1.22.22 $ ng serve ✔ Browser application bundle generation complete. Initial chunk files | Names | Raw size vendor.js | vendor | 7.38 MB | devextreme-material.css, devextreme-material.js | devextreme-material | 869.99 kB | scripts.js | scripts | 500.22 kB | bootstrap.css, bootstrap.js | bootstrap | 349.55 kB | polyfills.js | polyfills | 260.59 kB | fontawesome.css, fontawesome.js | fontawesome | 198.16 kB | leptonx-layout.css, leptonx-layout.js | leptonx-layout | 160.20 kB | leptonx-light.css, leptonx-light.js | leptonx-light | 129.70 kB | styles.css, styles.js | styles | 127.04 kB | main.js | main | 120.50 kB | runtime.js | runtime | 14.47 kB | | Initial total | 10.11 MB

  Save Cancel
• 

  0

  alrashdi1989 created 21 days ago

  the ouput window dose not show anything

  Save Cancel
• 

  0

  maliming created 20 days ago

  Support Team Fullstack Developer

  hi

  Could you share a demo app that reproduces the issue?

  liming.ma@volosoft.com Thanks

  Save Cancel