docs/en/Community-Articles/2025-08-19-abp-now-supports-angular-standalone-applications/POST.md
We are excited to announce that ABP now supports Angular’s standalone component structure in the latest Studio update. This article walks you through how to generate a standalone application, outlines the migration steps, and highlights the benefits of this shift over traditional module-based architecture.
Angular's standalone component architecture, which is introduced in version 14 and made default in version 19, is a major leap forward for Angular development. Here is why it matters:
Standalone components eliminate the need for NgModule wrappers. This leads to:
Navigating and understanding your codebase becomes easier for everyone on your team.
Standalone apps simplify app initialization:
bootstrapApplication(AppComponent, appConfig);
This avoids the need for AppModule and speeds up startup times.
Since components declare their own dependencies, Angular can more effectively tree-shake unused code. Result? Smaller bundle sizes and faster load times.
Standalone components are self-contained. They declare their dependencies within the imports array, making them:
Standalone components explicitly define what they need. No more hidden dependencies buried in shared modules.
You can mix and match standalone and module-based components. This allows for incremental migration, reducing risk in larger codebases. Here is the related document for the standalone migration.
Angular CLI makes it easy to start:
ng new my-app
With Angular 19, new apps follow this bootstrapping model:
// main.ts
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
import { AppComponent } from "./app/app.component";
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err)
);
The app.config.ts file replaces AppModule:
// app.config.ts
import { ApplicationConfig, provideZoneChangeDetection } from "@angular/core";
import { provideRouter } from "@angular/router";
import { routes } from "./app.routes";
export const appConfig: ApplicationConfig = {
providers: [
provideZoneChangeDetection({ eventCoalescing: true }),
provideRouter(routes),
],
};
Routing is defined in a simple Routes array:
// app.routes.ts
import { Routes } from "@angular/router";
export const routes: Routes = [];
Starting with the latest release (insert version number here), ABP Studio fully supports Angular's standalone structure. While the new format is encouraged, module-based structure will continue to be supported for backwards compatibility.
To try it out, simply update your ABP Studio to create apps with the latest version.
When you generate an app using the latest ABP Studio, the project structure aligns with Angular's standalone architecture.
This migration is split into four parts:
Migration has been applied to packages in the ABP GitHub repository. Here is an example from the Identity package.
Components are made standalone, using:
ng g @angular/core:standalone
Example:
@Component({
selector: 'abp-roles',
templateUrl: './roles.component.html',
providers: [...],
imports: [
ReactiveFormsModule,
LocalizationPipe,
...
],
})
export class RolesComponent implements OnInit { ... }
Old lazy-loaded routes using forLazy():
{
path: 'identity',
loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy({...}))
}
Now replaced with:
{
path: 'identity',
loadChildren: () => import('@abp/ng.identity').then(c => c.createRoutes({...}))
}
The old setup:
// identity.module.ts
@NgModule({
imports: [IdentityRoutingModule, RolesComponent, UsersComponent],
})
export class IdentityModule {...}
//identity-routing.module
const routes: Routes = [...];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class IdentityRoutingModule {}
New setup:
// identity-routes.ts
export function provideIdentity(options: IdentityConfigOptions = {}): Provider[] {
return [...];
}
export const createRoutes = (options: IdentityConfigOptions = {}): Routes => [
{
path: '',
component: RouterOutletComponent,
providers: provideIdentity(options),
children: [
{
path: 'roles',
component: ReplaceableRouteContainerComponent,
data: {
requiredPolicy: 'AbpIdentity.Roles',
replaceableComponent: {
key: eIdentityComponents.Roles,
defaultComponent: RolesComponent,
},
},
title: 'AbpIdentity::Roles',
},
...
],
},
];
You can reach details by checking ABP Schematics codebase.
When you run the abp create-lib command, the prompter will ask you the templateType. It supports both module and standalone templates.
"templateType": {
"type": "string",
"description": "Type of the template",
"enum": ["module", "standalone"],
"x-prompt": {
"message": "Select the type of template to generate:",
"type": "list",
"items": [
{ "value": "module", "label": "Module Template" },
{ "value": "standalone", "label": "Standalone Template" }
]
}
},
ABP Suite will also be supporting both structures. If you have a project that is generated with the previous versions, the Suite will detect the structure in that way and generate the related code accordingly. Conversely, here is what is changed for the standalone migration:
❌ Discarded module files
// entity-one.module.ts
@NgModule({
declarations: [],
imports: [EntityOneComponent, EntityOneRoutingModule],
})
export class EntityOneModule {}
// entity-one-routing.module.ts
export const routes: Routes = [
{
path: "",
component: EntityOneComponent,
canActivate: [authGuard, permissionGuard],
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class EntityOneRoutingModule {}
// app-routing.module.ts
{
path: 'entity-ones',
loadChildren: () =>
import('./entity-ones/entity-one/entity-one.module').then(m => m.EntityOneModule),
},
✅ Added routes configuration
// entity-one.routes.ts
export const ENTITY_ONE_ROUTES: Routes = [
{
path: "",
loadComponent: () => {
return import("./components/entity-one.component").then(
(c) => c.EntityOneComponent
);
},
canActivate: [authGuard, permissionGuard],
},
];
// app.routes.ts
{ path: 'entity-ones', children: ENTITY_ONE_ROUTES },
app.routes.ts// app.routes.ts
import { Routes } from '@angular/router';
export const APP_ROUTES: Routes = [
{
path: '',
pathMatch: 'full',
loadComponent: () => import('./home/home.component').then(m => m.HomeComponent),
},
{
path: 'account',
loadChildren: () => import('@abp/ng.account').then(m => m.createRoutes()),
},
...
];
app.config.ts// app.config.ts
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(APP_ROUTES),
APP_ROUTE_PROVIDER,
provideAbpCore(
withOptions({
environment,
registerLocaleFn: registerLocale(),
...
})
),
provideAbpOAuth(),
provideAbpThemeShared(),
...
],
};
shared.module.tsThis file has been removed to reduce unnecessary shared imports. Components now explicitly import what they need—leading to better encapsulation and less coupling.
You may encounter these common problems that you would need to manage.
In standalone structure, components must declare all their dependencies in imports. Forgetting this often causes template errors.
Combining modules and standalone in the same feature leads to confusion. Migrate features fully or keep them module-based.
Incorrect migration from forLazy() to createRoutes() or loadComponent can break navigation. Double-check route configs.
Services provided in old modules may be missing. Add them in the component’s providers or app.config.ts.
Reintroducing a shared module reduces the benefits of standalone. Import dependencies directly where needed.
Angular’s standalone component architecture is a significant improvement for scalability, simplicity, and performance. With latest version of ABP Studio, you can adopt this modern approach with ease—without losing support for existing module-based projects.
Ready to modernize your Angular development?
Update your ABP Studio today and start building with standalone power!