I want to create a minimal Blazor Web App project (with the purpose of testing a module's UI components). I have already created something that works and uses the module's test projects to set up the back-end ("module" means a DDD Web App module created from ABP Studio)
My server project has the following packages: Volo.Abp.AspNetCore.Mvc.UI.Bundling Volo.Abp.AspNetCore.Serilog Volo.Abp.Autofac Volo.Abp.AspNetCore.Components.Web Volo.Abp.AspNetCore.Components.Web.Theming Volo.Abp.AutoMapper as well as any other packages that the test projects and the source projects of the module have.
In order to test components that use basic services like IBlockUiService and INotificationService, I discovered that I need to add some bundles (js and css) to the minimal project. However, the documentation is unclear on what is needed to be included. At first I thought that I should just include the npm package "@abp/core". This did not work as apparently the abp.ui.block function in abp.js is not the same as what the IBlockUiService expects.
So I searched for any bundles that should be included in App.razor to make the basic ABP functionality work. Sadly, the documentation only mentions that the themes have global bundles and I do not have a theme in my minimal project. By searching ABP's project templates, I discovered the BlazorStandardBundles and BlazorWebAssemblyStandardBundles. If I include the BlazorStandardBundles in my App.razor, IBlockUiService at least works. INotificationService probably expects Blazorise to be initialized?
So, my questions are:
- What bundles should I include in my App.razor to make the basic ABP functionality work and what about this BlazorWebAssemblyStandardBundles? Where should it go?
- How should I initialize Blazorise to make the basic ABP functionality work? Volo.Abp.AspNetCore.Components.Web.Theming -> Volo.Abp.BlazoriseUI seems to register the Blazorise services but not contribute to the global bundles?
- Is there anything else needed for the packages mentioned above to work correctly?
10 Answer(s)
-
0
- 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:
- Required Bundles in App.razor:
- For Blazor Server, you should include the
BlazorStandardBundlesin 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.cshtmlor MainLayout.razor):
- For Blazor Server, you should include the
<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
BlazorWebAssemblyStandardBundlesare specifically for Blazor WASM projects and should be used in the host project that serves the WASM client.
- Blazorise Initialization:
- If your components depend on Blazorise (e.g., for notifications), you must initialize Blazorise in your
Program.cs:
- If your components depend on Blazorise (e.g., for notifications), you must initialize Blazorise in your
builder.Services.AddBlazorise(options => { /* options */ }) .AddBootstrapProviders() .AddFontAwesomeIcons();- In your
App.razororMainLayout.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(andVolo.Abp.BlazoriseUI) registers Blazorise services, but you still need to ensure the correct providers and icon sets are initialized in your UI code.
- 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
BundleContributorand 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.
-
0
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.
-
0
hi
Can you share a minimal/sample project that reproduces the issue?
liming.ma@volosoft.com
Thanks.
-
0
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); // }); }); } -
0
hi
I will check your project.
Thanks.
-
0
hi
I have sent the mail. Please check it in your inbox.
Thanks
-
0
Are you saying that it is necessary to have a theme for a minimal ABP application to work? I thought ABP was meant to be modular in the sense that you only installed what you needed and the installed modules did the setup for whatever dependency they needed.
Also, the services that I mentioned were not working (the block service and the notification service) are just those I've noticed. Is there another service from the initial packages (and their dependencies) that might not work even if I use a theme?
-
0
hi
Are you saying that it is necessary to have a theme for a minimal ABP application to work? I thought ABP was meant to be modular in the sense that you only installed what you needed and the installed modules did the setup for whatever dependency they needed.
You can use it without the basic theme; Blazor will use
BlazorStandardBundles.Styles.GlobalandBlazorStandardBundles.Styles.Globalas bundle names.
Also, the services that I mentioned were not working (the block service and the notification service) are just those I've noticed. Is there another service from the initial packages (and their dependencies) that might not work even if I use a theme?
Basically not. I have sent you the latest source code. If you have any questions, please feel free to give us feedback.
Thanks.
-
0
Thank you very much for the layout. I see now that some services need hooks in the layout to work. I would suggest a note in the documentation of those services mentioning the necessary setup in case a theme is not used or is being customized.
-
0
Thanks.
