Open Closed

[ABP 6.0] Can not load lepton css in Angular #3839


0
BlazeChanel created
  • ABP Framework version: v6.0.0
  • UI type: Angular (lepton theme)
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace:
  • Steps to reproduce the issue:"
    1. create abp project with cli: abp new Acme.BookStore --theme lepton -t app-pro -u angular --no-random-port --skip-installing-libs
    2. run host and angular will see below error.

Other problem in Angular(Lepton theme) template:

  1. Missing @volo/abp.ng.theme.lepton package in package.json
  2. Has leptonX theme related css in angular.json style section

1 Answer(s)
  • 0
    mahmut.gundogdu created
    Support Team

    Thank you for your response. I have created an bug report. It will fixed soon.

    yarn add @volo/abp.ng.theme.lepton.

    Remove leptonX codes on angular.json

     {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.css",
                    "inject": false,
                    "bundleName": "dark"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.css",
                    "inject": false,
                    "bundleName": "light"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.css",
                    "inject": false,
                    "bundleName": "dim"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.css",
                    "inject": false,
                    "bundleName": "bootstrap-dim"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.css",
                    "inject": false,
                    "bundleName": "bootstrap-dark"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.css",
                    "inject": false,
                    "bundleName": "bootstrap-light"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.css",
                    "inject": false,
                    "bundleName": "ng-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.css",
                    "inject": false,
                    "bundleName": "layout-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.css",
                    "inject": false,
                    "bundleName": "abp-bundle"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dark.rtl.css",
                    "inject": false,
                    "bundleName": "dark.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/light.rtl.css",
                    "inject": false,
                    "bundleName": "light.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/dim.rtl.css",
                    "inject": false,
                    "bundleName": "dim.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dim.rtl.css",
                    "inject": false,
                    "bundleName": "bootstrap-dim.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-dark.rtl.css",
                    "inject": false,
                    "bundleName": "bootstrap-dark.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/bootstrap-light.rtl.css",
                    "inject": false,
                    "bundleName": "bootstrap-light.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/ng-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "ng-bundle.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/ngx-lepton-x/assets/css/side-menu/layout-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "layout-bundle.rtl"
                  },
                  {
                    "input": "node_modules/@volosoft/abp.ng.theme.lepton-x/assets/css/abp-bundle.rtl.css",
                    "inject": false,
                    "bundleName": "abp-bundle.rtl"
                  },
    

    add lepton bundle files

          {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.min.css",
                    "inject": false,
                    "bundleName": "lepton1"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.min.css",
                    "inject": false,
                    "bundleName": "lepton2"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.min.css",
                    "inject": false,
                    "bundleName": "lepton3"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.min.css",
                    "inject": false,
                    "bundleName": "lepton4"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.min.css",
                    "inject": false,
                    "bundleName": "lepton5"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.min.css",
                    "inject": false,
                    "bundleName": "lepton6"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton1.rtl.min.css",
                    "inject": false,
                    "bundleName": "lepton1.rtl"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton2.rtl.min.css",
                    "inject": false,
                    "bundleName": "lepton2.rtl"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton3.rtl.min.css",
                    "inject": false,
                    "bundleName": "lepton3.rtl"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton4.rtl.min.css",
                    "inject": false,
                    "bundleName": "lepton4.rtl"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton5.rtl.min.css",
                    "inject": false,
                    "bundleName": "lepton5.rtl"
                  },
                  {
                    "input": "node_modules/@volo/abp.ng.theme.lepton/dist/global/styles/lepton6.rtl.min.css",
                    "inject": false,
                    "bundleName": "lepton6.rtl"
                  },
    

    optional: Customize your logo. Add these codes in Styles.scss file.

    
     --logo: url('/assets/images/logo/logo-light.png') !important;
     --logo-reverse: url(/assets/images/logo/logo-dark.png);  !important;