Given that ABP promotes a modular solution, it seems logical that each module should handle its own dependencies and initializations since the modules are supposed to be able to be added/removed to/from a solution without much change to the solution. Ideally, the only change when adding/removing a module, would be to add the project/package reference and add the AbpModule of the module's project to the DependsOnAttribute of the solution's projects.
However, the ABP project templates for the solutions indicate that the main application project is responsible for initializing or managing many dependencies of the UI layer.
I want to build a Blazor WebApp application with many modules. Each module is responsible for a business domain and has its own models, logic and UI. Modules may depend on other modules (no circular dependencies obviously). Now I need to implement some components in one of the modules.
What I want: I want to open the module solution, implement the UI component and use a test UI project to see the component and test it. I want the project that implements the UI component to contain and initialize any 3rd party library it may use to develop the component.
Problems:
- ABP module templates do not come with a UI test project. I decided to make a minimal Blazor WebApp project and ship it as a template for the team to use in all the modules.
- I am having trouble with the minimal Blazor WebApp project because it doesn't have anything in the libs folder. However, I don't want to disable the CheckLibs flag because the user using this template may need to add libs later.
- I am unclear on how to include the libraries the module needs. I have 3 projects: Blazor, Blazor.Server and Blazor.Client. Besides NuGet packages, what NPM packages should I install and how if for example I need Blazorise components?
- I am unclear on how to prevent multiple initializations of the libraries (for example to prevent adding Blazorise services and Configurations multiple times). ABP handles this issue when it comes to AbpModules because it makes a dependency graph before initialization. But when it comes to external libraries, the solution the ABP Studio seems to promote is to add all initialization in one place: The main application module. But now that I want each module to have a UI project as an entry point, adding and managing this initialization in every project is impossible.
1 Answer(s)
-
0
In ABP, each module is designed to be self-contained, including its own dependencies, initialization, and UI components. The recommended approach is to encapsulate all module-specific logic, services, and UI in the module itself, so it can be added or removed with minimal changes to the main application—typically just a project/package reference and a DependsOn entry.
For UI testing, ABP does not provide a built-in UI test project template for modules. However, you can create a minimal Blazor WebApp project as a reusable template for your team. This project can reference the module and serve as a test harness for UI components.
To include third-party libraries (like Blazorise) in a module:
- Add the required NuGet packages to the module's Blazor project.
- If the library requires static assets (JS/CSS), use ABP's bundling system. Create a BundleContributor in your module to add the necessary files to the bundle. This ensures assets are included when the module is referenced by the main app or a test app.
- For NPM packages, if you need to ship them with the module, include them in the module's wwwroot/libs folder and reference them via the bundling system. The main app or test app will then serve these assets.
To avoid multiple initializations of third-party libraries:
- Place the initialization code (e.g., service registrations, configuration) inside the module's AbpModule.ConfigureServices method.
- ABP's module system ensures that each module is initialized only once, even if referenced by multiple projects, by building a dependency graph and handling initialization order.
- For third-party Blazor libraries that require a single initialization (e.g., Blazorise), encapsulate their initialization in a dedicated module (e.g., MyModule.BlazoriseModule) and ensure only this module calls the initialization code. Other modules should depend on this module if they need the library, but not re-initialize it.
For the CheckLibs flag and the libs folder: If your minimal Blazor WebApp test project doesn't need any libraries initially, you can keep the folder empty and add assets as needed. The CheckLibs flag is a safeguard but can be left enabled; just document for your team that they should add required assets when needed.
In summary, each module should:
- Register its own services and dependencies in its AbpModule.
- Use BundleContributors to add required JS/CSS assets.
- Encapsulate third-party library initialization in a dedicated module if needed.
- Use a minimal Blazor WebApp as a test harness, referencing the module for UI testing.
Sources:
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.
