How is the new Blazor Bundling system work?

[mavado83]

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?

[maliming]

hi

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

[mavado83]

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

[mavado83]

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

[maliming]

Thanks. I will confirm this.

[maliming]

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

[maliming]

We will fix it in next Studio version.

[mavado83]

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:

[mavado83]

@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:

[maliming]

ok