Open Closed

LeptonX Issue with hosting on subpath #4608

User avatar
0
jfistelmann created

It seems like styles are not loaded properly when hosted under a subpath (like /booking).

  • ABP Framework version: v7.0.2
  • UI type: Blazor
  • DB provider: EF Core / MongoDB
  • Tiered (MVC) or Identity Server Separated (Angular): no
  • Exception message and stack trace:

Browser logs 

Navigated to https://localhost:44444/booking
msgport.js:70 {"notify":"init_tab"}
booking:89 
        
      
GET https://localhost:44444/favicon.ico 404
blazor.server.js?_v=638101739740000000:1 [2023-02-26T15:17:16.382Z] Information: WebSocket connected to wss://localhost:44444/booking/_blazor?id=u--jChdnGbDVmiZz6FB5XQ.
lepton-x.bundle.min.js?_v=638122179560000000:2 
        
GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-light.css net::ERR_ABORTED 404
e.replaceStyleWith @ lepton-x.bundle.min.js?_v=638122179560000000:2
loadThemeCSS @ style-initializer.js?_v=638122179560000000:13
(anonymous) @ style-initializer.js?_v=638122179560000000:35
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.changeTheme @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.setInitialDefaultValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.withPersistedValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.createSettingGroups @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.run @ lepton-x.bundle.min.js?_v=638122179560000000:2
window.initLeptonX @ style-initializer.js?_v=638122179560000000:39
(anonymous) @ blazor.server.js?_v=638101739740000000:1
beginInvokeJSFromDotNet @ blazor.server.js?_v=638101739740000000:1
_invokeClientMethod @ blazor.server.js?_v=638101739740000000:1
_processIncomingData @ blazor.server.js?_v=638101739740000000:1
Ft.connection.onreceive @ blazor.server.js?_v=638101739740000000:1
i.onmessage @ blazor.server.js?_v=638101739740000000:1
lepton-x.bundle.min.js?_v=638122179560000000:2 
        
      
GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/light.css net::ERR_ABORTED 404
e.replaceStyleWith @ lepton-x.bundle.min.js?_v=638122179560000000:2
loadThemeCSS @ style-initializer.js?_v=638122179560000000:13
(anonymous) @ style-initializer.js?_v=638122179560000000:36
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.dispatch @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.changeTheme @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.setInitialDefaultValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.withPersistedValue @ lepton-x.bundle.min.js?_v=638122179560000000:2
e.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.createSettingGroups @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.create @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
(anonymous) @ lepton-x.bundle.min.js?_v=638122179560000000:2
t.run @ lepton-x.bundle.min.js?_v=638122179560000000:2
window.initLeptonX @ style-initializer.js?_v=638122179560000000:39
(anonymous) @ blazor.server.js?_v=638101739740000000:1
beginInvokeJSFromDotNet @ blazor.server.js?_v=638101739740000000:1
_invokeClientMethod @ blazor.server.js?_v=638101739740000000:1
_processIncomingData @ blazor.server.js?_v=638101739740000000:1
Ft.connection.onreceive @ blazor.server.js?_v=638101739740000000:1
i.onmessage @ blazor.server.js?_v=638101739740000000:1

blazor logs

[16:21:23 INF] Request starting HTTP/2 GET https://localhost:44444/booking - -
[16:21:26 INF] Executing endpoint '/_Host'
[16:21:26 INF] Route matched with {page = "/_Host", area = "", action = "", controller = ""}. Executing page /_Host
[16:21:26 INF] Skipping the execution of current filter as its not the most effective filter implementing the policy Microsoft.AspNetCore.Mvc.ViewFeatures.IAntiforgeryPolicy
[16:21:26 INF] Executing an implicit handler method - ModelState is Valid
[16:21:26 INF] Executed an implicit handler method, returned result Microsoft.AspNetCore.Mvc.RazorPages.PageResult.
[16:21:26 INF] Executed page /_Host in 135.029ms
[16:21:26 INF] Executed endpoint '/_Host'
[16:21:26 INF] Request finished HTTP/2 GET https://localhost:44444/booking - - - 200 - text/html;+charset=utf-8 3031.1221ms
[16:21:26 INF] Request starting HTTP/2 POST https://localhost:44444/booking/_blazor/disconnect multipart/form-data;+boundary=----WebKitFormBoundaryAQK87RduBrQ8EPdc 359
[16:21:26 INF] No CORS policy found for the specified request.
[16:21:26 INF] Executing endpoint 'Blazor disconnect'
[16:21:26 INF] Executed endpoint 'Blazor disconnect'
[16:21:26 INF] Request finished HTTP/2 POST https://localhost:44444/booking/_blazor/disconnect multipart/form-data;+boundary=----WebKitFormBoundaryAQK87RduBrQ8EPdc 359 - 200 0 - 27.2675ms
[16:21:26 INF] Request starting HTTP/2 GET https://localhost:44444/_framework/aspnetcore-browser-refresh.js - -
[16:21:26 INF] Request starting HTTP/2 GET https://localhost:44444/_vs/browserLink - -
[16:21:26 INF] Request finished HTTP/2 GET https://localhost:44444/_framework/aspnetcore-browser-refresh.js - - - 200 12000 application/javascript;+charset=utf-8 2.8023ms
[16:21:26 INF] Request starting HTTP/2 GET https://localhost:44444/booking/_blazor/initializers - -
[16:21:27 INF] Executing endpoint 'Blazor initializers'
[16:21:27 INF] Executed endpoint 'Blazor initializers'
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/_blazor/initializers - - - 200 - application/json;+charset=utf-8 13.3728ms
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/_vs/browserLink - - - 200 - text/javascript;+charset=UTF-8 25.2235ms
[16:21:27 INF] Request starting HTTP/2 GET https://localhost:44444/booking/_content/toast_ui.blazor_calendar/tui-calendar.css.map - -
[16:21:27 INF] Request starting HTTP/2 GET https://localhost:44444/booking/libs/bootstrap/css/bootstrap.css.map - -
[16:21:27 INF] Sending file. Request path: '/libs/bootstrap/css/bootstrap.css.map'. Physical path: 'omitted here'
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/libs/bootstrap/css/bootstrap.css.map - - - 200 538014 text/plain 12.9745ms
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/_content/toast_ui.blazor_calendar/tui-calendar.css.map - - - 404 0 - 23.4318ms
[16:21:27 INF] Request starting HTTP/2 GET https://localhost:44444/booking/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap/js/bootstrap.bundle.min.js.map - -
[16:21:27 INF] Sending file. Request path: '/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap/js/bootstrap.bundle.min.js.map'. Physical path: 'C:\Nuget\volo.abp.aspnetcore.components.web.leptonxtheme\2.0.2\staticwebassets\side-menu\libs\bootstrap\js\bootstrap.bundle.min.js.map'
[16:21:27 INF] Request finished HTTP/2 GET https://localhost:44444/booking/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/libs/bootstrap/js/bootstrap.bundle.min.js.map - - - 200 331017 text/plain 3.7991ms
[16:21:27 INF] Request starting HTTP/2 POST https://localhost:44444/booking/_blazor/negotiate?negotiateVersion=1 - 0
[16:21:27 INF] No CORS policy found for the specified request.
[16:21:27 INF] Executing endpoint '/_blazor/negotiate'
[16:21:27 INF] Executed endpoint '/_blazor/negotiate'
[16:21:27 INF] Request finished HTTP/2 POST https://localhost:44444/booking/_blazor/negotiate?negotiateVersion=1 - 0 - 200 316 application/json 16.8755ms
[16:21:27 INF] Request starting HTTP/2 CONNECT https://localhost:44444/booking/_blazor?id=cJakNNp9vG7pXV_XGnSfhQ - -
[16:21:27 INF] No CORS policy found for the specified request.
[16:21:27 INF] Executing endpoint '/_blazor'
[16:21:28 INF] Request starting HTTP/2 GET https://localhost:44444/api/account/profile-picture-file/3a099c63-1cd0-339b-566f-8ee634b1a88c - -
[16:21:28 INF] Executing endpoint 'Volo.Abp.Account.AccountController.GetProfilePictureFileAsync (Volo.Abp.Account.Pro.Public.HttpApi)'
[16:21:28 INF] Route matched with {area = "account", action = "GetProfilePictureFile", controller = "Account", page = ""}. Executing controller action with signature System.Threading.Tasks.Task`1[Volo.Abp.Content.IRemoteStreamContent] GetProfilePictureFileAsync(System.Guid) on controller Volo.Abp.Account.AccountController (Volo.Abp.Account.Pro.Public.HttpApi).
[16:21:29 INF] Request starting HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-light.css - -
[16:21:29 INF] Request starting HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/light.css - -
[16:21:29 INF] Request finished HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/light.css - - - 404 0 - 14.7841ms
[16:21:29 INF] Request finished HTTP/2 GET https://localhost:44444/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/side-menu/css/bootstrap-light.css - - - 404 0 - 18.4347ms
[16:21:29 INF] Start processing HTTP request GET https://secure.gravatar.com/avatar/772e4c7cf714ec0307112ac91dcdca47
[16:21:29 INF] Sending HTTP request GET https://secure.gravatar.com/avatar/772e4c7cf714ec0307112ac91dcdca47
[16:21:29 INF] Received HTTP response headers after 154.4608ms - 200
[16:21:29 INF] End processing HTTP request after 158.4783ms - 200
[16:21:29 INF] Executing ObjectResult, writing value of type 'Volo.Abp.Content.RemoteStreamContent'.
[16:21:29 INF] Executed action Volo.Abp.Account.AccountController.GetProfilePictureFileAsync (Volo.Abp.Account.Pro.Public.HttpApi) in 922.4114ms
[16:21:29 INF] Executed endpoint 'Volo.Abp.Account.AccountController.GetProfilePictureFileAsync (Volo.Abp.Account.Pro.Public.HttpApi)'
[16:21:29 INF] Request finished HTTP/2 GET https://localhost:44444/api/account/profile-picture-file/3a099c63-1cd0-339b-566f-8ee634b1a88c - - - 200 2637 image/jpeg 944.2043ms
  • Steps to reproduce the issue:"

Make new Blazor server abp project.

Do the usual migration stuff as you need

Change blazor appsettings so that it is hosted under a sub path

"App": {
    "SelfUrl": "https://localhost:44444/booking",
    // ...
  },
 "AuthServer": {
    "Authority": "https://localhost:44444/booking",
    // ...
  },

In BlazorModule, change OnApplicationInitialization to the following

public override void OnApplicationInitialization(ApplicationInitializationContext context)
    {
        var env = context.GetEnvironment();
        var app = context.GetApplicationBuilder();

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseAbpRequestLocalization();

        if (!env.IsDevelopment())
        {
            app.UseErrorPage();
            app.UseHsts();
        }

        app.UseHttpsRedirection();
        app.UseCorrelationId();
        app.UseStaticFiles("/booking"); // this is new
        app.UsePathBase("/booking"); // this is new
        app.UseRouting();

        app.UseAuthentication();
        app.UseJwtTokenMiddleware();

        app.UseUnitOfWork();
        app.UseIdentityServer();
        app.UseAuthorization();
        app.UseSwagger();
        app.UseAbpSwaggerUI(options =>
        {
            options.SwaggerEndpoint("/swagger/v1/swagger.json", "Your API");
        });
        app.UseAuditing();
        app.UseAbpSerilogEnrichers();

        app.UseConfiguredEndpoints();
    }

Start blazor app

open browser and navigate to whatever url it is with /booking at the end.

additional info:

I just found out that I am able to download the source code. After some digging I found out that the issue is inside the style-initializer.

If I changed the code to the following :

function createStyleUrl(theme, type) {

        if (isRtl()) {
            theme = theme + '.rtl';
        }

        let pathPrefix = window.location.pathname;

        if (pathPrefix == `/`) {
            pathPrefix = ``;
        }
        console.log(`path prefix: ` + pathPrefix);

        if (type) {

            return pathPrefix + `/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${type}-${theme}.css`
        }
        return pathPrefix + `/_content/Volo.Abp.AspNetCore.Components.Web.LeptonXTheme/${window.currentLayout}/css/${theme}.css`;
    }

The style loads and stuff works.

Go to accepted answer
1 Answer(s)
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    See: https://support.abp.io/QA/Questions/4441#answer-27f5a8fa-264a-a9c2-66c3-3a0919e17aad

    The problem has been fixed, and it will include in the next patch.

    You ticket refunded.

Assignee
No one
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.2.0-preview. Updated on March 17, 2025, 10:38