Blazor global bundles #9982

5 Answer(s)

• 

  0

  AI-Bot created 12 hours ago

  Support Team ABP Agent

  • To enable basic ABP functionality (such as IBlockUiService and INotificationService) in a minimal Blazor Web App, you need to ensure the correct bundles and service initializations are in place. Here are the steps and explanations for your questions:

  1. Required Bundles in App.razor:
     • For Blazor Server, you should include the BlazorStandardBundles in your layout or _Host.cshtml (for Blazor Server) or in the appropriate place for Blazor WebAssembly.
     • For Blazor WebAssembly, use BlazorWebAssemblyStandardBundles.
     • These bundles ensure that the necessary JavaScript and CSS files (including those for block UI, notifications, etc.) are available.
     • Example for Blazor Server (in _Host.cshtml or MainLayout.razor):

  <abp-style-bundle Name="BlazorStandardBundles.Styles.Global" />
       <abp-script-bundle Name="BlazorStandardBundles.Scripts.Global" />
  

  • For Blazor WebAssembly, use:

  <abp-style-bundle Name="BlazorWebAssemblyStandardBundles.Styles.Global" />
       <abp-script-bundle Name="BlazorWebAssemblyStandardBundles.Scripts.Global" />
  

  • The BlazorWebAssemblyStandardBundles are specifically for Blazor WASM projects and should be used in the host project that serves the WASM client.

  2. Blazorise Initialization:
     • If your components depend on Blazorise (e.g., for notifications), you must initialize Blazorise in your Program.cs:

  builder.Services.AddBlazorise(options => { /* options */ })
           .AddBootstrapProviders()
           .AddFontAwesomeIcons();
  

  • In your App.razor or MainLayout.razor, add:

  <Blazorise.Bootstrap.BootstrapProvider>
           <Blazorise.Icons.FontAwesome.FontAwesomeIconProvider>
               @Body
           </Blazorise.Icons.FontAwesome.FontAwesomeIconProvider>
       </Blazorise.Bootstrap.BootstrapProvider>
  

  • The ABP module Volo.Abp.AspNetCore.Components.Web.Theming (and Volo.Abp.BlazoriseUI) registers Blazorise services, but you still need to ensure the correct providers and icon sets are initialized in your UI code.

  3. Other Requirements:
     • Make sure your project references the correct theme or at least the standard bundles, as some ABP services expect certain scripts/styles to be present.
     • If you use ABP modules that depend on global assets (JS/CSS), ensure those are contributed via bundle contributors or included in your bundle configuration.
     • If you are not using a theme, you must still ensure the global bundles are present for ABP UI services to function.

  Example configuration in your module:

  [DependsOn(
      typeof(AbpAspNetCoreComponentsWebThemingModule),
      typeof(AbpBlazoriseUIModule)
  )]
  public class MyMinimalBlazorModule : AbpModule
  {
      public override void ConfigureServices(ServiceConfigurationContext context)
      {
          Configure<AbpBundlingOptions>(options =>
          {
              options.StyleBundles.Get(BlazorStandardBundles.Styles.Global)
                  .AddContributors(typeof(MyCustomStyleContributor));
              options.ScriptBundles.Get(BlazorStandardBundles.Scripts.Global)
                  .AddContributors(typeof(MyCustomScriptContributor));
          });
      }
  }
  

  • If you need to add custom JS/CSS, implement your own BundleContributor and add it as shown above.

  Sources

  • Blazor UI: Theming System: Global Styles & Scripts / Bundling & Minification
  • Bundle Contributors
  • ABP Global Assets in Blazor WebAssembly

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  konstantinidis.f created 12 hours ago

  The AI basically reiterated what I said. I don't have a _Host.cshtml in a Blazor Web App project and the .AddBlazorise is already done by Volo.Abp.BlazoriseUI. AddBootstrapProviders() and AddFontAwesomeIcons() are not done, but wouldn't they be done if BlazoriseUI needed them?

  Please answer again to my original questions.

  Save Cancel
• 

  0

  maliming created 12 hours ago

  Support Team Fullstack Developer

  hi

  Can you share a minimal/sample project that reproduces the issue?

  liming.ma@volosoft.com

  Thanks.

  Save Cancel
• 

  0

  konstantinidis.f created 11 hours ago

  I sent a project. You can switch between the commented lines for different results of the test. Without the BlazorStandardBundles, calling IBlockUiService and IUiNotificationService produces exceptions. With the BlazorStandardBundles, IBlockUiService works correctly, but IUiNotificationService does nothing.

  private void ConfigureBundles()
  {
  	//Create the global bundle
  	Configure<AbpBundlingOptions>(options =>
  	{
  		options.StyleBundles
  			.Add("MyGlobalBundle");
  		//options.StyleBundles
  		//    .Add("MyGlobalBundle", config =>
  		//    {
  		//        config.AddBaseBundles(BlazorStandardBundles.Styles.Global);
  		//    });
  
  		options.ScriptBundles
  			.Add("MyGlobalBundle");
  		//options.ScriptBundles
  		//    .Add("MyGlobalBundle", config =>
  		//    {
  		//        config.AddBaseBundles(BlazorStandardBundles.Scripts.Global);
  		//    });
  	});
  }
  

  Save Cancel
• 

  0

  maliming created 10 hours ago

  Support Team Fullstack Developer

  hi

  I will check your project.

  Thanks.

  Save Cancel