Open Closed

miss CSS, all Blazor pages are confused #6730


User avatar
0
zhongfang created
  • ABP Framework version: v8.0.4
  • UI Type: Blazor Server
  • Database System: EF Core (MySQL)
  • Tiered (for MVC) or Auth Server Separated (for Angular): no
  • Exception message and full stack trace:
  • Steps to reproduce the issue:
  • dotnet tool update -g volo.abp.cli
  • abp suite update
  • run abp install-libs under Blazor.Server.Host
  • start Debug under Visual Studio 2022
  • first page (not logged in) is confused
  • click 'log in' button. page is normal.


20 Answer(s)
  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    Steps or project to reproduce the issue, Thanks.

  • User Avatar
    0
    zhongfang created

    a very old Module. And it can run correctly under my ABP 8.0.3 in the morning.

    I upgrade my ABP from 8.0.3 to 8.0.4. Then I got above error.

    I see a information in browser console. I pasted as below.

    blazor.server.js?_v=638411564080000000:1 [2024-02-23T14:26:04.460Z] Information: Normalizing '_blazor' to 'https://localhost:44313/_blazor'.
    localhost/:1 Third-party cookie will be blocked. Learn more in the Issues tab.
    blazor.server.js?_v=638411564080000000:1 [2024-02-23T14:26:04.490Z] Information: WebSocket connected to wss://localhost:44313/_blazor?id=FsS-vjaaPLj9VmpNuguOJw.
    utilities.js?v=1.4.1.0:303 Thank you for using the free version of the Blazorise component library! We're happy to offer it to you for personal use. If you'd like to remove this message, consider purchasing a commercial license from https://blazorise.com/commercial. We appreciate your support!
    

    May I need to purchase a Blazorise comercial lisense?

  • User Avatar
    0
    jfistelmann created

    did you run abp install-libs? did you also check for leptonx updates while upgrading?

    and no, you do not need to purchase a blazorise commercial license.

  • User Avatar
    0
    zhongfang created

    yes, I hav runned abp install-libs in proper path.

    but how to check for leptonx updates while upgrading?

    1. I use new package.json to run abp install-libs I always use new version Abp Suite to create a new Application. Then I got this package.json from new 8.0.4 newest Application under Blazor project:
    {
      "version": "1.0.0",
      "name": "my-app",
      "private": true,
      "dependencies": {
        "@volo/abp.aspnetcore.mvc.ui.theme.leptonx": "~3.0.3",
        "@volo/aspnetcore.components.server.leptonxtheme": "~3.0.3",
        "@volo/cms-kit-pro.admin": "~8.0.4",
        "@volo/account": "~8.0.4",
        "@volo/language-management": "~8.0.4"
      }
    }
    
    1. two LeptonX packages are version 3.0.4.
  • User Avatar
    0
    cellero created

    I'm getting the same issue.
    https://support.abp.io/QA/Questions/6737/Menu-Formatting-lost

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi zhongfang and cellero

    Please share a simple project to reproduce, Thanks.

    liming.ma@volosoft.com

  • User Avatar
    0
    cellero created

    hi zhongfang and cellero

    Please share a simple project to reproduce, Thanks.

    liming.ma@volosoft.com

    I am only encountering this on a large project. I tried to reproduce by downgrading ABP Suite to 8.0.3, creating new project and upgrading to 8.04. But I cannot reproduce by doing this.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi zhongfang

    Can you?

  • User Avatar
    0
    zhongfang created

    I have sen you my Module project. Perhaps it has been created by ABP Suite 4, after update to 5, then to 6, then to 7, then to 8.0.0, then to 8.0.2... 8.0.4 I delete all involved module, and then packege for you to reproduce the error.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi zhongfang

    I haven't received your project.

  • User Avatar
    0
    zhongfang created

    Perhaps you can find in Junk box. I have sent successfully by qq mail. And I didn't receive a refund mail.,

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    You can try to using https://wetransfer.com/

  • User Avatar
    0
    zhongfang created

    I have sent mail to you. The mail includ a webtransfer short link.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi

    I still have not received your mail. You can send the link by https://wetransfer.com/

    Thanks

  • User Avatar
    0
    zhongfang created

    OH, i have "Reply to" noreply@abp.io.

    I have sent again to liming.ma@volosoft.com just now.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    hi @all

    We need add <leptonx-theme-appearance /> to _Host.cshtml

    _ViewImports.cshtml

    @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
    @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI
    @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bootstrap
    @addTagHelper *, Volo.Abp.AspNetCore.Mvc.UI.Bundling
    @addTagHelper *, Volo.Abp.AspNetCore.Components.Server.LeptonXTheme
    
    

    _Host.cshtml

    @page "/"
    @namespace Yee.Change.ToolKit.Blazor.Server.Host.Pages
    @using System.Globalization
    @using Volo.Abp.AspNetCore.Components.Server.LeptonXTheme.Bundling
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components
    @using Volo.Abp.Localization
    @{
        Layout = null;
        var rtl = CultureHelper.IsRtl ? "rtl" : string.Empty;
    }
    
    <!DOCTYPE html>
    <html lang="@CultureInfo.CurrentCulture.Name" dir="@rtl">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>ToolKit</title>
        <base href="~/" />
    
        <abp-style-bundle name="@BlazorLeptonXThemeBundles.Styles.Global" />
    
        <leptonx-theme-appearance />
    
    </head>
    <body class="abp-application-layout @rtl">
        <component type="typeof(App)" render-mode="Server" />
    
        <div id="blazor-error-ui">
            <environment include="Staging,Production">
                An error has occurred. This application may no longer respond until reloaded.
            </environment>
            <environment include="Development">
                An unhandled exception has occurred. See browser dev tools for details.
            </environment>
            <a href="" class="reload">Reload</a>
            <a class="dismiss">🗙</a>
        </div>
    
        <abp-script-bundle name="@BlazorLeptonXThemeBundles.Scripts.Global" />
    </body>
    </html>
    
    
  • User Avatar
    0
    cellero created

    Excellent. That has worked for me.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Good news.

  • User Avatar
    0
    zhongfang created

    Thanks! It has worked for my.

  • User Avatar
    0
    maliming created
    Support Team Fullstack Developer

    Thanks @all

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11