Open Closed

Blank page #9965


User avatar
0
alrashdi1989 created

Hi i recently started a new angular dontcore project with Lipton x theme when i build the project i only get a blank page with no errors.wgen i switched to basic theme the project worked perfectly. I am using abp latest release


6 Answer(s)
  • User Avatar
    0
    AI-Bot created
    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.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Are there any error messages in the Browser console?

    Thanks.

  • User Avatar
    0
    alrashdi1989 created

    [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

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    What is the output of the angular yarn start command?

    Thanks.

  • User Avatar
    0
    alrashdi1989 created

    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

  • User Avatar
    0
    alrashdi1989 created

    the ouput window dose not show anything

Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.1.0-preview. Updated on October 02, 2025, 08:00