How to Add a Module in the ABP.io Application?

If you’re building your application with ABP.io, you’re already on the right path to creating scalable and professional software. One of the best things about ABP.io is how it supports modular architecture. But what does that really mean?

In simple words, a module in ABP.io is like a complete feature package. It comes with its own logic, database setup, APIs, and even user interface parts. Think of it as a plug-and-play part of your application that keeps your code clean, reusable, and easy to manage.

ABP.io provides many useful built-in modules like Identity, Tenant Management, and Audit Logging. These help you quickly add common features without writing everything from scratch.

But sometimes, you need to go beyond the default options. Maybe your project has unique requirements. That’s when creating a custom module becomes important.

In this guide, I’ll show you how to add a custom module, like Vineforce.ProjectManagement, into your existing ABP.io application. You’ll learn how to do it step by step on both the backend using .NET and the frontend using Angular.

Whether you’re just starting with ABP.io or already have experience, this blog is made to help you integrate modules smoothly and with confidence.

What You’ll Learn in This Guide

• How to prepare your system for module integration
• How to add the module to your ABP.io backend using NuGet
• How to configure the database context and migrations
• How to link the Angular frontend with the module using npm
• Common pitfalls to avoid during integration

Step 1: Prerequisites & Setup
Before you begin, make sure the following tools and environments are set up properly.

1.1 Required Software

• .NET SDK (compatible with your ABP.io version)
• Node.js and npm
• Angular CLI (installed globally)
• ABP CLI (installed via dotnet tool)
• Visual Studio or Rider for .NET
• Git for version control

1.2 ABP.io Application Ready

Ensure you have an existing ABP.io application up and running. The application should be in either Modular Monolith or Microservice architecture.

Step 2: Backend Integration Using NuGet (C# / .NET)

We’ll start by connecting your backend application to the custom module using NuGet packages.

2.1 Add Required Packages "Vineforce.Admin.HttpApi.Host"

Vineforce.ProjectManagement.Application
Vineforce.ProjectManagement.HttpApi

2.2 Register Module Dependencies

1. Open the file AdminHttpApiHostModule.cs
2. Add the module dependencies inside the [DependsOn] attribute:

[DependsOn(
    typeof(ProjectManagementHttpApiModule),
    typeof(ProjectManagementApplicationModule),
    typeof(ProjectManagementEntityFrameworkCoreModule),
    typeof(ProjectManagementDomainSharedModule)
)]

1. Also, add the using statements at the top:

using Vineforce.ProjectManagement;
using Vineforce.ProjectManagement.EntityFrameworkCore;

2.3 Add Required Packages "Vineforce.Admin.EntityFrameworkCore"

Also, add the using statements at the top:

Vineforce.ProjectManagement.EntityFrameworkCore

2.4 Update Your DbContext

   1. Open AdminDbContext.cs

1. Inside the OnModelCreating method, add the following:

builder.ConfigureProjectManagement();

This step tells your database context to load and apply table configurations from the ProjectManagement module.

2.5 Apply Migrations

Once you update the DbContext, run EF Core migrations to apply the updated schema to your database.

Option A: Using Terminal / PowerShell

cd src/Vineforce.Admin.EntityFrameworkCore
dotnet ef migrations add Add_ProjectManagement_Module
dotnet ef database update

At this point, the new tables from the module will be added to your main database.

Step 3: Frontend Integration Using npm (Angular)

Once the backend is configured, let’s integrate the Angular frontend with the module.

3.1 Install the Angular Module

1. Open your Angular project root (usually /angular)
2. Run this command in the terminal:

npm i @vineforce-modules/project-management

1. You can view this link to copy the command: @vineforce-modules/project-management
2. This will also add the following entry in package.json:

"@vineforce-modules/project-management": "^9.0.0"

3.2 Update the app-routing.module.ts file

{
  path: 'project-management',
  loadChildren: () =>
    import('@vineforce-modules/project-management').then(m => m.ProjectManagementModule.forLazy()),
},

This step makes the ProjectManagement module visible in the frontend UI.

Step 4: Test the Integration

Now that everything is configured, it’s time to test.

4.1 Backend Checklist

• Run the application using Visual Studio or dotnet run
• Check if there are any build errors
• Confirm that new database tables were created

4.2 Frontend Checklist

• Run npm start or ng serve for Angular
• Log in to the app
• Navigate through the new module in the side menu
• Test create/edit/delete operations

Common Issues & Troubleshooting

Final Summary

You have now successfully done it.

• Added a module to your ABP.io backend
• Linked it with your database and ran migrations
• Integrated the Angular module using npm
• Updated routing and tested the entire module

This setup allows you to build and scale your application using modular principles without repeating core logic again and again.

Conclusion
Adding a custom module to your ABP.io application is not just a technical task, it is a smart way to keep your project scalable and organized. By following this step-by-step guide, you have successfully connected your backend using NuGet, updated your database context, applied migrations, and linked the frontend through npm and Angular routing.

This process helps you avoid repeating code, improves maintainability, and prepares your application for future growth. Whether you are adding one module or planning to build a fully modular system, this method will save time and reduce errors.

If you face any issues or want expert assistance, the Vineforce team is always ready to help with ABP.io development, custom modules, and performance optimization. You can reach us at [e-mail] for support or consultation.