Blazor WASM with Base Path does not lazy load static resources correctly

[ska737]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When using Blazor WASM with a non-default base path URL and lazy loading assemblies, the lazy loaded static resource files do not:

1. Lazy load the resource files (they are loaded immediately on application load)
2. Correctly pull the static files from the base path URL

Interestingly enough, it pulls them twice. The first time with the correct path, the second ignoring the base path, which then overwrites the previous resource (making the site report a 404 for the resource).

Expected Behavior

1. The lazy loaded static resources should load only when the lazy loaded assembly is loaded.
2. The lazy loaded static resources should adhere to the base path URL.

Steps To Reproduce

1. Clone repository at here
2. Debug with favorite editor/IDE
3. When browser is launched, pull up developer tools
4. Navigate to the base URL (http://localhost:<port>/lazy-loading/)
5. Observe the failed resource requests that should be lazy loaded
6. Navigate to the lazy loaded URL (http://localhost:<port>/lazy-loading/external)
7. Observe the failed resource requests

Exceptions (if any)

N/A

.NET Version

9.0.301

Anything else?

ASP.NET Core version: 9.0.6
IDE used locally: VS Code v1.104.2
dotnet info:

$ dotnet --info
.NET SDK:
 Version:           9.0.301
 Commit:            a596cd22e2
 Workload version:  9.0.300-manifests.9bcbba73
 MSBuild version:   17.14.5+edd3bbf37

Runtime Environment:
 OS Name:     Windows
 OS Version:  10.0.19045
 OS Platform: Windows
 RID:         win-x64
 Base Path:   C:\Program Files\dotnet\sdk\9.0.301\

.NET workloads installed:
There are no installed workloads to display.
Configured to use loose manifests when installing new manifests.

Host:
  Version:      9.0.6
  Architecture: x64
  Commit:       3875b54e7b

.NET SDKs installed:
  5.0.100 [C:\Program Files\dotnet\sdk]
  6.0.101 [C:\Program Files\dotnet\sdk]
  8.0.204 [C:\Program Files\dotnet\sdk]
  8.0.402 [C:\Program Files\dotnet\sdk]
  9.0.101 [C:\Program Files\dotnet\sdk]
  9.0.301 [C:\Program Files\dotnet\sdk]

.NET runtimes installed:
  Microsoft.AspNetCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 8.0.4 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 8.0.8 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 9.0.0 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.AspNetCore.App 9.0.6 [C:\Program Files\dotnet\shared\Microsoft.AspNetCore.App]
  Microsoft.NETCore.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 8.0.4 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 8.0.8 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 9.0.0 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.NETCore.App 9.0.6 [C:\Program Files\dotnet\shared\Microsoft.NETCore.App]
  Microsoft.WindowsDesktop.App 5.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 6.0.1 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 8.0.4 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 8.0.8 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 9.0.0 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]
  Microsoft.WindowsDesktop.App 9.0.6 [C:\Program Files\dotnet\shared\Microsoft.WindowsDesktop.App]

Other architectures found:
  arm64 [C:\Program Files\dotnet]
    registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\arm64\InstallLocation]
  x86   [C:\Program Files (x86)\dotnet]
    registered at [HKLM\SOFTWARE\dotnet\Setup\InstalledVersions\x86\InstallLocation]

Environment variables:
  Not set

global.json file:
  Not found

Learn more:
  https://aka.ms/dotnet/info

Download .NET:
  https://aka.ms/dotnet/download

[javiercn]

@ska737 thanks for contacting us.

Your base tag is wrong. <base href="lazy-loading" /> you need to remove the trailing slash

Nevermind, this was me making a dumb mistake.

[javiercn]

The app is not correctly configured.

diff --git a/LazyLoadingExample/LazyLoadingExample.csproj b/LazyLoadingExample/LazyLoadingExample.csproj
index 9c307df..fd195ce 100644
--- a/LazyLoadingExample/LazyLoadingExample.csproj
+++ b/LazyLoadingExample/LazyLoadingExample.csproj
@@ -4,7 +4,6 @@
     <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <StaticWebAssetBasePath>lazy-loading</StaticWebAssetBasePath>
   </PropertyGroup>
 
   <ItemGroup>
@@ -20,4 +19,8 @@
     <ProjectReference Include="..\LazyLoadThis\LazyLoadThis.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <None Include="blazor-devserversettings.json" CopyToOutputDirectory="PreserveNewest" />
+  </ItemGroup>
+
 </Project>
diff --git a/LazyLoadingExample/Pages/Home.razor.css b/LazyLoadingExample/Pages/Home.razor.css
index 36796b1..2a0393b 100644
--- a/LazyLoadingExample/Pages/Home.razor.css
+++ b/LazyLoadingExample/Pages/Home.razor.css
@@ -2,5 +2,5 @@
     border: 2px dashed red;
     padding: 1em;
     margin: 1em 0;
-    background-image: url('background.png');
+    background-image: url('_content/LazyLoadThis/background.png');
 }
\ No newline at end of file
diff --git a/LazyLoadingExample/Properties/launchSettings.json b/LazyLoadingExample/Properties/launchSettings.json
index 3b1dbc3..a657efd 100644
--- a/LazyLoadingExample/Properties/launchSettings.json
+++ b/LazyLoadingExample/Properties/launchSettings.json
@@ -5,25 +5,25 @@
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/lazy-loading/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "http://localhost:5138/",
+      "launchUrl": "lazy-loading",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "http://localhost:5138",
+      "commandLineArgs": "--pathbase /lazy-loading",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      },
-      "commandLineArgs": "--pathbase=/lazy-loading",
-      "launchUrl": "lazy-loading"
+      }
     },
     "https": {
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
-      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/lazy-loading/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7189/;http://localhost:5138/",
+      "launchUrl": "lazy-loading",
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7189;http://localhost:5138",
+      "commandLineArgs": "--pathbase /lazy-loading",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
-      },
-      "commandLineArgs": "--pathbase=/lazy-loading",
-      "launchUrl": "lazy-loading"
+      }
     }
   }
 }
diff --git a/LazyLoadingExample/blazor-devserversettings.json b/LazyLoadingExample/blazor-devserversettings.json
new file mode 100644
index 0000000..ab8ecdc
--- /dev/null
+++ b/LazyLoadingExample/blazor-devserversettings.json
@@ -0,0 +1,11 @@
+{
+  "pathbase": "/lazy-loading",
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft": "Information",
+      "Microsoft.Hosting.Lifetime": "Information",
+      "Microsoft.AspNetCore.Routing": "Debug"
+    }
+  }
+}
\ No newline at end of file
diff --git a/LazyLoadingExample/wwwroot/index.html b/LazyLoadingExample/wwwroot/index.html
index f1bcdfd..e9e078a 100644
--- a/LazyLoadingExample/wwwroot/index.html
+++ b/LazyLoadingExample/wwwroot/index.html
@@ -5,7 +5,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <title>LazyLoadingExample</title>
-        <base href="/lazy-loading/" />
+    <base href="/lazy-loading/" />
         <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.min.css" />
         <link rel="stylesheet" href="css/app.css" />
         <link rel="icon" type="image/png" href="favicon.png" />

@guardrex our docs on hosting standalone wasm on a subpath might be out of date.

[guardrex]

The approach came from a non-Microsoft GH repo at ...

https://github.com/ska737/BlazorWasmLazyLoadingIssue

We don't recommed/cover what that dev did in that sample in our docs.

[ska737]

The approach came from a non-Microsoft GH repo at ...

https://github.com/ska737/BlazorWasmLazyLoadingIssue

We don't recommed/cover what that dev did in that sample in our docs.

This was my reproduction of the issue, not my source. The documentation of hosting on a sub route and lazy loading is a bit confusing, but I just recently discovered many of the fixes listed. I was going to fully test this before replying to the issue.

However, I believe the pulling of the css upfront from a lazy loaded resource might still be a concern.

I'll update once I implement the fixes and test.

[guardrex]

Indeed! I was so busy this morning that I didn't notice. 😅

This subject spans two areas of coverage, which are lazy-loading assemblies (in one article) and hosting with a different base path (in a different article). If you discover special config is required when trying to integrate the guidance from these articles, please open a docs issue from the bottom of the lazy-loading article with the "Open a documentation issue" link at ...

https://learn.microsoft.com/aspnet/core/blazor/webassembly-lazy-load-assemblies

Then, we can figure out what coverage we need from there.

[javiercn]

However, I believe the pulling of the css upfront from a lazy loaded resource might still be a concern.

This is by design. Lazy loading is a WebAssembly feature to avoid downloading and loading the dll upfront, and that's its scope. It's completely unrelated to scoped CSS. We don't offer nor plan to offer a feature to load a webassembly dll and all associated resources on demand.