How is the new Blazor Bundling system work? #22369

mavado83 · 2025-03-13T16:41:17Z

mavado83
Mar 13, 2025

Not sure if I'm understanding the new bundling system correctly.
I just generated a new solution using the ABP Studio version 0.9.25 using the settings:
Application Layered => Blazor WebAssembly => EF Core

Now I have a Blazor and a Blazor.Client project.
Suppose inside the StyleBundleContributor I want to add another CSS file. I created a test.css in wwwroot and added it to the bundle context.Files.AddIfNotContains("test.css");

Inside ConfigureBundles I also added options.Mode = BundlingMode.Bundle; to make sure the bundle is generated during build.
But no global.css including the new test.css is generated..

Am I doing something wrong?

Answered by mavado83

Mar 17, 2025

Hi, I tried to move the Contributors from Blazor.Client to Blazor and got good results.

What I changed:

Move the ConfigureBundles from Blazor.Client to the Blazor project
Move the Contributor classes from Blazor.Client to Blazor
The .css files and .js files stay within the wwwroot folder from the Blazor.Client project

public override void ConfigureServices(ServiceConfigurationContext context)
{
    //https://github.com/dotnet/aspnetcore/issues/52530
    Configure<RouteOptions>(options =>
    {
        options.SuppressCheckForUnhandledSecurityMetadata = true;
    });

    // Add services to the container.
    context.Services.AddRazorComponents()
        .AddInteractiveWebAssemblyCompone…

View full answer

maliming · 2025-03-13T22:15:57Z

maliming
Mar 13, 2025
Collaborator

hi

https://abp.io/community/articles/abp-global-assets-new-way-to-bundle-javascriptcss-files-in-blazor-webassembly-app-i0nu10rs

0 replies

mavado83 · 2025-03-14T10:33:37Z

mavado83
Mar 14, 2025
Author

I read the article and it works for modules, but it looks like it's not working for a client application.
In the Blazor.Client project when I add BundlingMode.Bundle, then I exptected to see the bundling process when I run the Blazor project.
But the breakpoint never get's hit and bundling is not happening at all. (Auto is the default)

private void ConfigureBundles()
{       
    Configure<AbpBundlingOptions>(options =>
    {         
        var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global);
        globalStyles.AddContributors(typeof(AbpSolution12StyleBundleContributor));
      
        options.Mode = BundlingMode.Bundle;
    });
}

2025-03-14 11:29:39.347 +01:00 [INF]             - Volo.Abp.Features.AbpFeaturesModule
2025-03-14 11:29:39.536 +01:00 [INF] User profile is available. Using 'C:\Users\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
2025-03-14 11:29:39.714 +01:00 [WRN] Mapped static asset endpoints not found. Ensure 'MapStaticAssets' is called before 'AddInteractiveWebAssemblyRenderMode'.
2025-03-14 11:29:39.777 +01:00 [INF] Initialized all ABP modules.
2025-03-14 11:29:39.852 +01:00 [INF] Now listening on: https://localhost:44302
2025-03-14 11:29:39.852 +01:00 [INF] Application started. Press Ctrl+C to shut down.
2025-03-14 11:29:39.852 +01:00 [INF] Hosting environment: Development
2025-03-14 11:29:39.852 +01:00 [INF] Content root path: D:\Temp\AbpSolution12\src\AbpSolution12.Blazor
2025-03-14 11:29:52.036 +01:00 [INF] Application is shutting down...

When I switch to Test environment for example, the bundling is started (due to Auto mode) but not my custom additions:

[11:32:16 INF]                 - Volo.Abp.Serialization.AbpSerializationModule
[11:32:16 INF]               - Volo.Abp.Domain.AbpDddDomainSharedModule
[11:32:16 INF]             - Volo.Abp.Features.AbpFeaturesModule
[11:32:16 INF] Bundling __bundles/BlazorWebAssembly.Global.385AC226F9234655A363306A941F4D08.css (9 files)
[11:32:16 DBG] Bundle files:
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/bootstrap/css/bootstrap.min.css (162723 bytes)
[11:32:16 DBG]   > Already minified.
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css (148801 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/fontawesome/css/all.css (148801 bytes -> 105148 bytes)
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/css/abp.css (1342 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/css/abp.css (1342 bytes -> 878 bytes)
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.WebAssembly.Theming/libs/flag-icon/css/flag-icon.css
[11:32:16 DBG]   > Using the pre-minified file: flag-icon.min.css (33962 bytes)
[11:32:16 DBG] - _content/Blazorise/blazorise.css
[11:32:16 DBG]   > Using the pre-minified file: blazorise.min.css (59852 bytes)
[11:32:16 DBG] - _content/Blazorise.Bootstrap5/blazorise.bootstrap5.css
[11:32:16 DBG]   > Using the pre-minified file: blazorise.bootstrap5.min.css (76495 bytes)
[11:32:16 DBG] - _content/Blazorise.Snackbar/blazorise.snackbar.css
[11:32:16 DBG]   > Using the pre-minified file: blazorise.snackbar.min.css (9840 bytes)
[11:32:16 DBG] - _content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css (1274 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.BlazoriseUI/volo.abp.blazoriseui.css (1274 bytes -> 939 bytes)
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.Web.BasicTheme/libs/abp/css/theme.css (3543 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.AspNetCore.Components.Web.BasicTheme/libs/abp/css/theme.css (3543 bytes -> 2423 bytes)
[11:32:16 INF] Bundled __bundles/BlazorWebAssembly.Global.385AC226F9234655A363306A941F4D08.css (492500 bytes)
[11:32:16 INF] Bundling __bundles/BlazorWebAssembly.Global.13378D3396ABB68B9D2AF5BE94B006A7.js (4 files)
[11:32:16 DBG] Bundle files:
[11:32:16 DBG] - _content/Microsoft.AspNetCore.Components.WebAssembly.Authentication/AuthenticationService.js (292380 bytes)
[11:32:16 DBG]   > Ignored for minification.
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js (8553 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/abp.js (8553 bytes -> 3582 bytes)
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/lang-utils.js (676 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/lang-utils.js (676 bytes -> 371 bytes)
[11:32:16 DBG] - _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/authentication-state-listener.js (453 bytes) - non minified, minifying...
[11:32:16 INF]   > Minified _content/Volo.Abp.AspNetCore.Components.Web/libs/abp/js/authentication-state-listener.js (453 bytes -> 234 bytes)
[11:32:16 INF] Bundled __bundles/BlazorWebAssembly.Global.13378D3396ABB68B9D2AF5BE94B006A7.js (296579 bytes)
[11:32:16 INF] User profile is available. Using 'C:\Users\AppData\Local\ASP.NET\DataProtection-Keys' as key repository and Windows DPAPI to encrypt keys at rest.
[11:32:17 INF] Initialized all ABP modules.
[11:32:17 INF] Now listening on: https://localhost:44302
[11:32:17 INF] Application started. Press Ctrl+C to shut down.
[11:32:17 INF] Hosting environment: Test
[11:32:17 INF] Content root path: D:\Temp\AbpSolution12\src\AbpSolution12.Blazor

0 replies

mavado83 · 2025-03-14T10:49:08Z

mavado83
Mar 14, 2025
Author

The same is for the default Blazor WebApp template.
It should be bundling:

public class AbpSolution14ScriptBundleContributor : BundleContributor
{
    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.Add(new BundleFile("bootstrap-patch.js", true));
    }
}

But the file is never added to the bundle when running the application

4 replies

maliming Mar 15, 2025
Collaborator

Thanks. I will confirm this.

maliming Mar 15, 2025
Collaborator

You can try to move this AbpSolution14ScriptBundleContributor from blazor.client to blazor.

maliming Mar 17, 2025
Collaborator

We will fix it in next Studio version.

mavado83 Mar 17, 2025
Author

Hi, I tried to move the Contributors from Blazor.Client to Blazor and got good results.

What I changed:

Move the ConfigureBundles from Blazor.Client to the Blazor project
Move the Contributor classes from Blazor.Client to Blazor
The .css files and .js files stay within the wwwroot folder from the Blazor.Client project

public override void ConfigureServices(ServiceConfigurationContext context)
{
    //https://github.com/dotnet/aspnetcore/issues/52530
    Configure<RouteOptions>(options =>
    {
        options.SuppressCheckForUnhandledSecurityMetadata = true;
    });

    // Add services to the container.
    context.Services.AddRazorComponents()
        .AddInteractiveWebAssemblyComponents();

    Configure<AbpMvcLibsOptions>(options =>
    {
        options.CheckLibs = false;
    });

    ConfigureBundles();
}

private void ConfigureBundles()
{
    Configure<AbpBundlingOptions>(options =>
    {
        var globalStyles = options.StyleBundles.Get(BlazorWebAssemblyStandardBundles.Styles.Global);
        globalStyles.AddContributors(typeof(AbpSolution15StyleBundleContributor));

        var globalScripts = options.ScriptBundles.Get(BlazorWebAssemblyStandardBundles.Scripts.Global);
        globalScripts.AddContributors(typeof(AbpSolution15ScriptBundleContributor));

        options.Mode = BundlingMode.Bundle;
    });

}

public class AbpSolution15StyleBundleContributor : BundleContributor
{
    public override void ConfigureBundle(BundleConfigurationContext context)
    {
        context.Files.Add(new BundleFile("main.css", true));
        context.Files.Add(new BundleFile("test.css", true));
    }
}

public class AbpSolution15ScriptBundleContributor : BundleContributor
{
    public override void ConfigureBundle(BundleConfigurationContext context)
    {        
        context.Files.AddIfNotContains("greetinghelpers.js");
    }
}

The content is added as expected:

Answer selected by maliming

mavado83 · 2025-05-14T11:14:58Z

mavado83
May 14, 2025
Author

@maliming I can see that the change is in the new version. Please also clean the template by removing the unused usings in the Blazor.Client Module:

1 reply

maliming May 14, 2025
Collaborator

ok

How is the new Blazor Bundling system work? #22369

Uh oh!

Uh oh!

mavado83 Mar 13, 2025

Replies: 4 comments · 5 replies

Uh oh!

maliming Mar 13, 2025 Collaborator

Uh oh!

mavado83 Mar 14, 2025 Author

Uh oh!

mavado83 Mar 14, 2025 Author

Uh oh!

maliming Mar 15, 2025 Collaborator

Uh oh!

maliming Mar 15, 2025 Collaborator

Uh oh!

maliming Mar 17, 2025 Collaborator

Uh oh!

mavado83 Mar 17, 2025 Author

Uh oh!

mavado83 May 14, 2025 Author

Uh oh!

maliming May 14, 2025 Collaborator

mavado83
Mar 13, 2025

Replies: 4 comments 5 replies

maliming
Mar 13, 2025
Collaborator

mavado83
Mar 14, 2025
Author

mavado83
Mar 14, 2025
Author

maliming Mar 15, 2025
Collaborator

maliming Mar 15, 2025
Collaborator

maliming Mar 17, 2025
Collaborator

mavado83 Mar 17, 2025
Author

mavado83
May 14, 2025
Author

maliming May 14, 2025
Collaborator