Merge branch 'dev' into mapperly-tenant-management

Directory.Packages.props

@@ -18,10 +18,10 @@
     <PackageVersion Include="BunnyCDN.Net.Storage" Version="1.0.4" />
     <PackageVersion Include="Azure.Messaging.ServiceBus" Version="7.19.0" />
     <PackageVersion Include="Azure.Storage.Blobs" Version="12.24.0" />
-    <PackageVersion Include="Blazorise" Version="1.8.0" />
-    <PackageVersion Include="Blazorise.Components" Version="1.8.0" />
-    <PackageVersion Include="Blazorise.DataGrid" Version="1.8.0" />
-    <PackageVersion Include="Blazorise.Snackbar" Version="1.8.0" />
+    <PackageVersion Include="Blazorise" Version="1.8.1" />
+    <PackageVersion Include="Blazorise.Components" Version="1.8.1" />
+    <PackageVersion Include="Blazorise.DataGrid" Version="1.8.1" />
+    <PackageVersion Include="Blazorise.Snackbar" Version="1.8.1" />
     <PackageVersion Include="Castle.Core" Version="5.1.1" />
     <PackageVersion Include="Castle.Core.AsyncInterceptor" Version="2.1.0" />
     <PackageVersion Include="CommonMark.NET" Version="0.15.1" />
@@ -168,7 +168,7 @@
     <PackageVersion Include="System.Collections.Immutable" Version="9.0.5" />
     <PackageVersion Include="System.ComponentModel.Annotations" Version="5.0.0" />
     <PackageVersion Include="System.Linq.Async" Version="6.0.1" />
-    <PackageVersion Include="System.Linq.Dynamic.Core" Version="1.6.2" />
+    <PackageVersion Include="System.Linq.Dynamic.Core" Version="1.6.7" />
     <PackageVersion Include="System.Linq.Queryable" Version="4.3.0" />
     <PackageVersion Include="System.Runtime.Loader" Version="4.3.0" />
     <PackageVersion Include="System.Security.Permissions" Version="9.0.5" />
@@ -187,4 +187,4 @@
     <PackageVersion Include="ConfigureAwait.Fody" Version="3.3.2" />
     <PackageVersion Include="Fody" Version="6.9.2" />
   </ItemGroup>
-</Project>
+</Project>

docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/POST.md

@@ -0,0 +1,83 @@
+# 🚀 Best Practices for Azure DevOps CI/CD Pipelines
+
+**CI/CD (Continuous Integration / Continuous Delivery)** is not just fancy tech talk - it's now a must-have for modern software teams.  
+Microsoft's **Azure DevOps** helps make these processes easier to manage.  
+But how do you create pipelines that work well for your team? Let's look at some practical tips that will make your life easier.
+
+---
+
+## 1. 📜 Define Your Pipeline as Code
+
+Don't use the manual setup method that's hard to track. Azure DevOps lets you use **YAML files** for your pipelines, which gives you:
+
+- A record of all changes - who made them and when  
+- The same setup across all environments  
+- The ability to undo changes when something goes wrong  
+
+This stops the common problem where something works on one computer but not another.  
+
+![1-pipeline-yaml](1-pipeline-yaml.png)
+
+---
+
+## 2. 🔑 Store Sensitive Information Safely
+
+Never put passwords directly in your code, even temporarily.  
+Each environment should have its own settings, and keep sensitive information in **Azure Key Vault** or **Library Variable Groups**.  
+
+You'll avoid security problems later.  
+
+<!-- ![2-azure-key](2-azure-key.png) -->
+---
+
+## 3. 🏗️ Keep Building and Releasing Separate
+
+Think of **Building** like cooking a meal - you prepare everything and package it up.  
+**Releasing** is like delivering that meal to different people.  
+
+Keeping these as separate steps means:
+
+- You create your package once, then send it to multiple places  
+- You save time and resources by not rebuilding the same thing over and over  
+
+![3-release](3-release.png)
+
+---
+
+## 4. 🧪 Add Automatic Testing
+
+Don't waste time testing the same things manually over and over.  
+Set up **different types of tests** to run automatically. When tests run every time you make changes:
+
+- You catch problems before your customers do  
+- Your software quality stays high without extra manual work  
+
+Azure DevOps has tools to help you see test results easily without searching through technical logs.  
+
+---
+
+## 5. 🛡️ Add Safety Checks
+
+Automatic doesn't mean pushing everything to your live system right away.  
+For important environments, add **human approval steps** or **automatic checks** like security scans.  
+
+This helps you avoid emergency problems in the middle of the night.  
+
+![4-safe-deploy](4-safe-deploy.png)
+
+
+---
+
+## ✅ Conclusion
+
+Good Azure DevOps pipelines aren't just about automation - they help you feel confident in your process.  
+Remember these main points:
+
+✔ Use YAML files to keep everything visible and trackable  
+✔ Keep passwords and sensitive data in secure storage (not in your code)  
+✔ Build once, deploy to many places  
+✔ Let automatic tests find problems before users do  
+✔ Add safety checks for important systems
+
+![5-summarizing](5-summarizing.png)
+---

docs/en/Community-Articles/2025-08-19-abp-now-supports-angular-standalone-applications/POST.md

@@ -0,0 +1,398 @@
+# ABP Now Supports Angular Standalone Applications
+
+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.
+
+---
+
+## Why Standalone?
+
+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:
+
+### 🔧 Simplified Project Structure
+
+Standalone components eliminate the need for `NgModule` wrappers. This leads to:
+
+- Fewer files to manage
+- Cleaner folder organization
+- Reduced boilerplate
+
+Navigating and understanding your codebase becomes easier for everyone on your team.
+
+### 🚀 Faster Bootstrapping
+
+Standalone apps simplify app initialization:
+
+```ts
+bootstrapApplication(AppComponent, appConfig);
+```
+
+This avoids the need for `AppModule` and speeds up startup times.
+
+### 📦 Smaller Bundle Sizes
+
+Since components declare their own dependencies, Angular can more effectively tree-shake unused code. Result? Smaller bundle sizes and faster load times.
+
+### 🧪 Easier Testing & Reusability
+
+Standalone components are self-contained. They declare their dependencies within the `imports` array, making them:
+
+- Easier to test in isolation
+- Easier to reuse in different contexts
+
+### 🧠 Clearer Dependency Management
+
+Standalone components explicitly define what they need. No more hidden dependencies buried in shared modules.
+
+### 🔄 Gradual Adoption
+
+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](https://angular.dev/reference/migrations/standalone).
+
+---
+
+## Getting Started: Creating a Standalone Angular App
+
+Angular CLI makes it easy to start:
+
+```bash
+ng new my-app
+```
+
+With Angular 19, new apps follow this bootstrapping model:
+
+```ts
+// 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`:
+
+```ts
+// 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:
+
+```ts
+// app.routes.ts
+import { Routes } from "@angular/router";
+
+export const routes: Routes = [];
+```
+
+---
+
+## ABP Studio Support for Standalone Structure
+
+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.
+
+---
+
+## What’s New in ABP Studio Templates?
+
+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:
+
+1. **Package updates**
+2. **Schematics updates**
+3. **Suite code generation updates**
+4. **Template refactors**
+
+---
+
+## Package Migration Details
+
+Migration has been applied to packages in the [ABP GitHub repository](https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages). Here is an example from the Identity package.
+
+### 🧩 Migrating Components
+
+Components are made standalone, using:
+
+```bash
+ng g @angular/core:standalone
+```
+
+Example:
+
+```ts
+@Component({
+  selector: 'abp-roles',
+  templateUrl: './roles.component.html',
+  providers: [...],
+  imports: [
+    ReactiveFormsModule,
+    LocalizationPipe,
+    ...
+  ],
+})
+export class RolesComponent implements OnInit { ... }
+```
+
+### 🛣 Updating Routing
+
+Old lazy-loaded routes using `forLazy()`:
+
+```ts
+{
+  path: 'identity',
+  loadChildren: () => import('@abp/ng.identity').then(m => m.IdentityModule.forLazy({...}))
+}
+```
+
+Now replaced with:
+
+```ts
+{
+  path: 'identity',
+  loadChildren: () => import('@abp/ng.identity').then(c => c.createRoutes({...}))
+}
+```
+
+### 🧱 Replacing Module Declarations
+
+The old setup:
+
+```ts
+// identity.module.ts
+@NgModule({
+  imports: [IdentityRoutingModule, RolesComponent, UsersComponent],
+})
+export class IdentityModule {...}
+```
+
+```ts
+//identity-routing.module
+const routes: Routes = [...];
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class IdentityRoutingModule {}
+```
+
+New setup:
+
+```ts
+// 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',
+      },
+      ...
+    ],
+  },
+];
+```
+
+---
+
+## ABP Schematics Migration Details
+
+You can reach details by checking [ABP Schematics codebase](https://github.com/abpframework/abp/tree/dev/npm/ng-packs/packages/schematics).
+
+### 📚 Library creation
+
+When you run the `abp create-lib` command, the prompter will ask you the `templateType`. It supports both module and standalone templates.
+
+```ts
+"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 Code Generation Migration Details
+
+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**
+
+```ts
+// entity-one.module.ts
+@NgModule({
+  declarations: [],
+  imports: [EntityOneComponent, EntityOneRoutingModule],
+})
+export class EntityOneModule {}
+```
+
+```ts
+// 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 {}
+```
+
+```ts
+// app-routing.module.ts
+{
+  path: 'entity-ones',
+  loadChildren: () =>
+    import('./entity-ones/entity-one/entity-one.module').then(m => m.EntityOneModule),
+},
+```
+
+**✅ Added routes configuration**
+
+```ts
+// 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],
+  },
+];
+```
+
+```ts
+// app.routes.ts
+{ path: 'entity-ones', children: ENTITY_ONE_ROUTES },
+```
+
+---
+
+## Template Migration Details
+
+### 🧭 Routing: `app.routes.ts`
+
+```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()),
+  },
+  ...
+];
+```
+
+### ⚙ Configuration: `app.config.ts`
+
+```ts
+// app.config.ts
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideRouter(APP_ROUTES),
+    APP_ROUTE_PROVIDER,
+    provideAbpCore(
+      withOptions({
+        environment,
+        registerLocaleFn: registerLocale(),
+        ...
+      })
+    ),
+    provideAbpOAuth(),
+    provideAbpThemeShared(),
+    ...
+  ],
+};
+
+```
+
+### 🧼 Removed: `shared.module.ts`
+
+This file has been removed to reduce unnecessary shared imports. Components now explicitly import what they need—leading to better encapsulation and less coupling.
+
+---
+
+## Common Problems
+
+You may encounter these common problems that you would need to manage.
+
+### 1. Missing Imports
+
+In standalone structure, components must declare all their dependencies in `imports`. Forgetting this often causes template errors.
+
+### 2. Mixed Structures
+
+Combining modules and standalone in the same feature leads to confusion. Migrate features fully or keep them module-based.
+
+### 3. Routing Errors
+
+Incorrect migration from `forLazy()` to `createRoutes()` or `loadComponent` can break navigation. Double-check route configs.
+
+### 4. Service Injection
+
+Services provided in old modules may be missing. Add them in the component’s `providers` or `app.config.ts`.
+
+### 5. Shared Module Habit
+
+Reintroducing a shared module reduces the benefits of standalone. Import dependencies directly where needed.
+
+---
+
+## Conclusion
+
+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!

docs/en/Community-Articles/2025-08-25-App-Services-vs-Domain-Services/POST.md

@@ -0,0 +1,213 @@
+# App Services vs Domain Services: Deep Dive into Two Core Service Types in ABP Framework
+
+In ABP's layered architecture, we frequently encounter two types of services that appear similar but serve distinctly different purposes: Application Services and Domain Services. Understanding the differences between them is crucial for building clear and maintainable enterprise applications.
+
+## Architectural Positioning
+
+In ABP's layered architecture:
+
+- **Application Services** reside in the application layer and are responsible for coordinating use case execution
+- **Domain Services** reside in the domain layer and are responsible for implementing core business logic
+
+This layered design follows Domain-Driven Design (DDD) principles, ensuring clear separation of business logic and system maintainability.
+
+## Application Services: Use Case Orchestrators
+
+### Core Responsibilities
+
+Application Services are stateless services primarily used to implement application use cases. They act as a bridge between the presentation layer and domain layer, responsible for:
+
+- **Parameter Validation**: Input validation is automatically handled by ABP using data annotations
+- **Authorization**: Checking user permissions and access control using `[Authorize]` attribute or manual authorization checks via `IAuthorizationService`
+- **Transaction Management**: Methods automatically run as Unit of Work (transactional by default)
+- **Use Case Orchestration**: Organizing and coordinating multiple domain objects to complete specific business use cases
+- **Data Transformation**: Handling conversion between DTOs and domain objects using ObjectMapper
+
+### Design Principles
+
+1. **DTO Boundaries**: Application service methods should only accept and return DTOs, never directly expose domain entities
+2. **Use Case Oriented**: Each method should correspond to a clear user use case
+3. **Thin Layer Design**: Avoid implementing complex business logic in application services
+
+### Typical Execution Flow
+
+A standard application service method typically follows this pattern:
+
+```csharp
+[Authorize(BookPermissions.Create)] // Declarative authorization
+public virtual async Task<BookDto> CreateBookAsync(CreateBookDto input) // input is automatically validated
+{
+    // Get related data
+    var author = await _authorRepository.GetAsync(input.AuthorId);
+    
+    // Call domain service to execute business logic (if needed)
+    // You can also use the entity constructor directly if no complex business logic is required
+    var book = await _bookManager.CreateAsync(input.Title, author, input.Price);
+    
+    // Persist changes
+    await _bookRepository.InsertAsync(book);
+    
+    // Return DTO
+    return ObjectMapper.Map<Book, BookDto>(book);
+}
+```
+
+### Integration Services: Special kind of Application Service
+
+It's worth mentioning that ABP also provides a special type of application service—Integration Services. They are application services marked with the `[IntegrationService]` attribute, designed for inter-module or inter-microservice communication.
+
+We have a community article dedicated to integration services: [Integration Services Explained — What they are, when to use them, and how they behave](https://abp.io/community/articles/integration-services-explained-what-they-are-when-to-use-lienmsy8)
+
+## Domain Services: Guardians of Business Logic
+
+### Core Responsibilities
+
+Domain Services implement core business logic and are particularly needed when:
+
+- **Core domain logic depends on services**: You need to implement logic that requires repositories or other external services
+- **Logic spans multiple aggregates**: The business logic is related to more than one aggregate/entity and doesn't properly fit in any single aggregate
+- **Complex business rules**: Complex domain rules that don't naturally belong in a single entity
+
+### Design Principles
+
+1. **Domain Object Interaction**: Method parameters and return values should be domain objects (entities, value objects), never DTOs
+2. **Business Logic Focus**: Focus on implementing pure business rules
+3. **Stateless Design**: Maintain the stateless nature of services
+4. **State-Changing Operations Only**: Domain services should only define methods that mutate data, not query methods
+5. **No Authorization Logic**: Domain services should not perform authorization checks or depend on current user context
+6. **Specific Method Names**: Use descriptive, business-meaningful method names (e.g., `AssignToAsync`) instead of generic names (e.g., `UpdateAsync`)
+
+### Implementation Example
+
+```csharp
+public class IssueManager : DomainService
+{
+    private readonly IRepository<Issue, Guid> _issueRepository;
+    
+    public virtual async Task AssignToAsync(Issue issue, Guid userId)
+    {
+        // Business rule: Check user's unfinished task count
+        var openIssueCount = await _issueRepository.GetCountAsync(i => i.AssignedUserId == userId && !i.IsClosed);
+            
+        if (openIssueCount >= 3)
+        {
+            throw new BusinessException("IssueTracking:ConcurrentOpenIssueLimit");
+        }
+        
+        // Execute assignment logic
+        issue.AssignedUserId = userId;
+        issue.AssignedDate = Clock.Now;
+    }
+}
+```
+
+## Key Differences Comparison
+
+| Dimension | Application Services | Domain Services |
+|-----------|---------------------|-----------------|
+| **Layer Position** | Application Layer | Domain Layer |
+| **Primary Responsibility** | Use Case Orchestration | Business Logic Implementation |
+| **Data Interaction** | DTOs | Domain Objects |
+| **Callers** | Presentation Layer/Client Applications | Application Services/Other Domain Services |
+| **Authorization** | Responsible for permission checks | No authorization logic |
+| **Transaction Management** | Manages transaction boundaries (Unit of Work) | Participates in transactions but doesn't manage |
+| **Current User Context** | Can access current user information | Should not depend on current user context |
+| **Return Types** | Returns DTOs | Returns domain objects only |
+| **Query Operations** | Can perform query operations | Should not define GET/query methods |
+| **Naming Convention** | `*AppService` | `*Manager` or `*Service` |
+
+## Collaboration Patterns in Practice
+
+In real-world development, these two types of services typically work together:
+
+```csharp
+// Application Service
+public class BookAppService : ApplicationService
+{
+    private readonly BookManager _bookManager;
+    private readonly IRepository<Book> _bookRepository;
+    
+    [Authorize(BookPermissions.Update)]
+    public virtual async Task<BookDto> UpdatePriceAsync(Guid id, decimal newPrice)
+    {
+        var book = await _bookRepository.GetAsync(id);
+
+        await _bookManager.ChangePriceAsync(book, newPrice);
+        
+        await _bookRepository.UpdateAsync(book);
+        
+        return ObjectMapper.Map<Book, BookDto>(book);
+    }
+}
+
+// Domain Service
+public class BookManager : DomainService
+{
+    public virtual async Task ChangePriceAsync(Book book, decimal newPrice)
+    {
+        // Domain service focuses on business rules
+        if (newPrice <= 0)
+        {
+            throw new BusinessException("Book:InvalidPrice");
+        }
+        
+        if (book.IsDiscounted && newPrice > book.OriginalPrice)
+        {
+            throw new BusinessException("Book:DiscountedPriceCannotExceedOriginal");
+        }
+
+        if (book.Price == newPrice)
+        {
+            return;
+        }
+
+        // Additional business logic: Check if price change requires approval
+        if (await RequiresApprovalAsync(book, newPrice))
+        {
+            throw new BusinessException("Book:PriceChangeRequiresApproval");
+        }
+
+        book.ChangePrice(newPrice);
+    }
+    
+    private Task<bool> RequiresApprovalAsync(Book book, decimal newPrice)
+    {
+        // Example business rule: Large price increases require approval
+        var increasePercentage = ((newPrice - book.Price) / book.Price) * 100;
+        return Task.FromResult(increasePercentage > 50); // 50% increase threshold
+    }
+}
+```
+
+## Best Practice Recommendations
+
+### Application Services
+- Create a corresponding application service for each aggregate root
+- Use clear naming conventions (e.g., `IBookAppService`)
+- Implement standard CRUD operation methods (`GetAsync`, `CreateAsync`, `UpdateAsync`, `DeleteAsync`)
+- Avoid inter-application service calls within the same module/application
+- Always return DTOs, never expose domain entities directly
+- Use the `[Authorize]` attribute for declarative authorization or manual checks via `IAuthorizationService`
+- Methods automatically run as Unit of Work (transactional)
+- Input validation is handled automatically by ABP
+
+### Domain Services
+- Use the `Manager` suffix for naming (e.g., `BookManager`)
+- Only define state-changing methods, avoid query methods (use repositories directly in Application Services for queries)
+- Throw `BusinessException` with clear, unique error codes for domain validation failures
+- Keep methods pure, avoid involving user context or authorization logic
+- Accept and return domain objects only, never DTOs
+- Use descriptive, business-meaningful method names (e.g., `AssignToAsync`, `ChangePriceAsync`)
+- Do not implement interfaces unless there's a specific need for multiple implementations
+
+## Summary
+
+Application Services and Domain Services each have their distinct roles in the ABP framework: Application Services serve as use case orchestrators, handling authorization, validation, transaction management, and DTO transformations; Domain Services focus purely on business logic implementation without any infrastructure concerns. Integration Services are a special type of Application Service designed for inter-service communication.
+
+Correctly understanding and applying these service patterns is key to building high-quality ABP applications. Through clear separation of responsibilities, we can not only build more maintainable code but also flexibly switch between monolithic and microservice architectures—this is precisely the elegance of ABP framework design.
+
+## References
+
+- [Application Services](https://abp.io/docs/latest/framework/architecture/domain-driven-design/application-services)
+- [Integration Services](https://abp.io/docs/latest/framework/api-development/integration-services)
+- [Domain Services](https://abp.io/docs/latest/framework/architecture/domain-driven-design/domain-services)

docs/en/Community-Articles/2025-08-25-AutoMapper-Alternatives/AutoMapper-Alternatives.md

@@ -0,0 +1,317 @@
+# Best Free Alternatives to AutoMapper in .NET  — Why We Moved to Mapperly
+
+---
+
+## Introduction
+
+[AutoMapper](https://automapper.io/) has been one of the most popular mapping library for .NET apps. It has been free and [open-source](https://github.com/LuckyPennySoftware/AutoMapper) since 2009. On 16 April 2025, Jimmy Bogard (the owner of the project) decided to make it commercial for his own reasons. You can read [this announcement](https://www.jimmybogard.com/automapper-and-mediatr-licensing-update/) about what happened to AutoMapper.
+
+
+
+### Why AutoMapper’s licensing change matters
+
+In ABP Framework we have been also using AutoMapper for object mappings. After its commercial transition, we also needed to replace it. Because ABP Framework is open-source and under [LGPL-3.0 license](https://github.com/abpframework/abp#LGPL-3.0-1-ov-file).  
+
+**TL;DR** 
+
+> That's why, **we decided to replace AutoMapper with Mapperly**.
+
+In this article, we'll discuss the alternatives of AutoMapper so that you can cut down on costs and maximize performance while retaining control over your codebase. Also I'll explain why we chose Mapperly. 
+
+Also AutoMapper uses heavily reflection. And reflection comes with a performance cost if used indiscriminately, and compile-time safety is limited. Let's see how we can overcome these...
+
+
+
+## Cost-Free Alternatives to AutoMapper
+
+Check out the comparison table for key features vs. AutoMapper.
+
+|                     | **AutoMapper (Paid)**                           | **Mapster (Free)**                        | **Mapperly (Free)**                          | **AgileMapper (Free)**                      | **Manual Mapping**                               |
+| ------------------- | ----------------------------------------------- | ----------------------------------------- | -------------------------------------------- | ------------------------------------------- | ------------------------------------------------ |
+| **License & Cost**  | Paid/commercial                                 | Free, MIT License                         | Free, MIT License                            | Free, Apache 2.0                            | Free (no library)                                |
+| **Performance**     | Slower due to reflection & conventions          | Very fast (runtime & compile-time modes)  | Very fast (compile-time code generation)     | Good, faster than AutoMapper                | Fastest (direct assignment)                      |
+| **Ease of Setup**   | Easy, but configuration-heavy                   | Easy, minimal config                      | Easy, but different approach from AutoMapper | Simple, flexible configuration              | Manual coding required                           |
+| **Features**        | Rich features, conventions, nested mappings     | Strong typed mappings, projection support | Strong typed, compile-time safe mappings     | Dynamic & conditional mapping               | Whatever you code                                |
+| **Maintainability** | Hidden mappings can be hard to debug            | Explicit & predictable                    | Very explicit, compiler-verified mappings    | Readable, good balance                      | Very explicit, most maintainable                 |
+| **Best For**        | Large teams used to AutoMapper & willing to pay | Teams wanting performance + free tool     | Teams prioritizing type-safety & performance | Developers needing flexibility & simplicity | Small/medium projects, performance-critical apps |
+
+There are other libraries such as [**ExpressMapper**](https://github.com/fluentsprings/ExpressMapper) **(308K GitHub stars)**, [**ValueInjecter**](https://github.com/omuleanu/ValueInjecter) **(258K GitHub stars)**, [**AgileMapper**](https://github.com/agileobjects/AgileMapper) **(463K GitHub stars)**. These are not very popular but also free and offer a different balance of simplicity and features.
+
+
+
+## Why We Chose Mapperly
+
+We filtered down all the alternatives into 2: **Mapster** and **Mapperly**. 
+
+The crucial factor was maintainability! As you see from the screenshots below, Mapster is already stopped development. Mapster’s development appears stalled, and its future maintenance is uncertain. On the other hand, Mapperly regularly gets commits. The community support is valuable. 
+
+We looked up different alternatives of AutoMapper also, here's the initial issue of AutoMapper replacement [github.com/abpframework/abp/issues/23243](https://github.com/abpframework/abp/issues/23243). 
+
+The ABP team started Mapperly integration with this initial commit [github.com/abpframework/abp/commit/178d3f56d42b4e5acb7e349470f4a644d4c5214e](https://github.com/abpframework/abp/commit/178d3f56d42b4e5acb7e349470f4a644d4c5214e). And this is our Mapperly integration package : [github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.Mapperly.](https://github.com/abpframework/abp/tree/dev/framework/src/Volo.Abp.Mapperly.) 
+
+![Community Powers](mapster-mapperly-community-powers.png)
+
+Here are some considerations for developers who are used to ABP and AutoMapper. 
+
+### [Mapster](https://github.com/MapsterMapper/Mapster):
+
+* ✔ It is similar to AutoMapper, configuring mappings through code.
+* ✔ Support for dependency injection and complex runtime configuration.
+* ❌ It is looking additional Mapster maintainers ([Call for additional Mapster maintainers MapsterMapper/Mapster#752](https://github.com/MapsterMapper/Mapster/discussions/752))
+
+### [Mapperly](https://github.com/riok/Mapperly):
+
+- ✔ It generates mapping code(` source generator`) during the build process.
+- ✔ It is actively being developed and maintained.
+- ❌ It is a static `map` method, which is not friendly to dependency injection.
+- ❌ The configuration method is completely different from AutoMapper, and there is a learning curve.
+
+
+
+**Mapperly** → generates mapping code at **compile time** using source generators.
+
+**Mapster** → has two modes:
+
+- By default, it uses **runtime code generation** (via expression trees and compilation).
+
+- But with **Mapster.Tool** (source generator), it can also generate mappings at **compile time**.
+
+  
+
+This is important because it guarantees the mappings are working well. Also they provide type safety and improved performance. Another advantages of these libraries, they eliminate runtime surprises and offer better IDE support.
+
+---
+
+## When Mapperly Will Come To ABP
+
+Mapperly integration will be delivered with ABP v10. If you have already defined AutoMapper configurations, you can still keep and use them. But the framework will use Mapperly. So there'll be 2 mapping integrations in your app. You can also remove AutoMapper from your final application and use one mapping library: Mapperly. It's up to you! Check [AutoMapper pricing table](https://automapper.io/#pricing).
+
+
+
+## Migrating from AutoMapper to Mapperly
+
+In ABP v10, we will be migrating from AutoMapper to Mapperly. The document about the migration is not delivered by the time I wrote this article, but you can reach the document in our dev docs branch 
+
+* [github.com/abpframework/abp/blob/dev/docs/en/release-info/migration-guides/AutoMapper-To-Mapperly.md](https://github.com/abpframework/abp/blob/dev/docs/en/release-info/migration-guides/AutoMapper-To-Mapperly.md).
+
+Also for ABP, you can check out how you will define DTO mappings based on Mapperly at this document 
+
+* [github.com/abpframework/abp/blob/dev/docs/en/framework/infrastructure/object-to-object-mapping.md](https://github.com/abpframework/abp/blob/dev/docs/en/framework/infrastructure/object-to-object-mapping.md)
+
+
+
+## Mapping  Code Examples for AutoMapper, Mapster, AgileMapper
+
+### AutoMapper vs Mapster vs Mapperly Performance
+
+Here are concise, drop-in **side-by-side C# snippets** that map the same model with AutoMapper, Mapster, AgileMapper, and manual mapping.
+
+ Models used in all examples
+
+We'll use these models to show the mapping examples for AutoMapper, Mapster, AgileMapper.
+
+```csharp
+public sealed class Order
+{
+    public int Id { get; init; }
+    public Customer Customer { get; init; } = default!;
+    public List<OrderLine> Lines { get; init; } = new();
+    public DateTime CreatedAt { get; init; }
+}
+
+public sealed class Customer
+{
+    public int Id { get; init; }
+    public string Name { get; init; } = "";
+    public string? Email { get; init; }
+}
+
+public sealed class OrderLine
+{
+    public int ProductId { get; init; }
+    public int Quantity { get; init; }
+    public decimal UnitPrice { get; init; }
+}
+
+public sealed class OrderDto
+{
+    public int Id { get; init; }
+    public string CustomerName { get; init; } = "";
+    public int ItemCount { get; init; }
+    public decimal Total { get; init; }
+    public string CreatedAtIso { get; init; } = "";
+}
+```
+
+
+
+#### AutoMapper Example (Paid)
+
+```csharp
+public sealed class OrderProfile : Profile
+{
+    public OrderProfile()
+    {
+        CreateMap<Order, OrderDto>()
+            .ForMember(d => d.CustomerName, m => m.MapFrom(s => s.Customer.Name))
+            .ForMember(d => d.ItemCount,   m => m.MapFrom(s => s.Lines.Sum(l => l.Quantity)))
+            .ForMember(d => d.Total,       m => m.MapFrom(s => s.Lines.Sum(l => l.Quantity * l.UnitPrice)))
+            .ForMember(d => d.CreatedAtIso,m => m.MapFrom(s => s.CreatedAt.ToString("O")));
+    }
+}
+
+// registration
+services.AddAutoMapper(typeof(OrderProfile));
+
+// mapping
+var dto = mapper.Map<OrderDto>(order);
+
+// EF Core projection (common pattern)
+var list = dbContext.Orders
+    .ProjectTo<OrderDto>(mapper.ConfigurationProvider)
+    .ToList();
+```
+
+**NuGet Packages:**
+
+- https://www.nuget.org/packages/AutoMapper 
+- https://www.nuget.org/packages/AutoMapper.Extensions.Microsoft.DependencyInjection 
+
+---
+
+#### Mapperly (Free, Apache-2.0)
+
+This is compile-time generated mapping.
+
+```csharp
+[Mapper] // generates the implementation at build time
+public partial class OrderMapper
+{
+    // Simple property mapping: Customer.Name -> CustomerName
+    [MapProperty(nameof(Order.Customer) + "." + nameof(Customer.Name), nameof(OrderDto.CustomerName))]
+    public partial OrderDto ToDto(Order s);
+
+    // Update an existing target (like MapToExisting)
+    [MapProperty(nameof(Order.Customer) + "." + nameof(Customer.Name), nameof(OrderDto.CustomerName))]
+    public partial void UpdateDto(Order s, OrderDto target);
+
+    // Post-process calculated fields (ItemCount, Total, CreatedAtIso)
+    // https://mapperly.riok.app/docs/configuration/before-after-map/
+    [UserMapping(Default = true)]  
+    private static void After(Order s, ref OrderDto d)
+    {
+        d = d with
+        {
+            ItemCount = s.Lines.Sum(l => l.Quantity),
+            Total = s.Lines.Sum(l => l.Quantity * l.UnitPrice),
+            CreatedAtIso = s.CreatedAt.ToString("O")
+        };
+    }
+}
+
+//USAGE
+var mapper = new OrderMapper();
+var dto = mapper.ToDto(order);
+
+var target = new OrderDto();
+mapper.UpdateDto(order, target);
+```
+
+**NuGet Packages:**
+
+* https://www.nuget.org/packages/Riok.Mapperly/
+
+---
+
+#### Mapster Example (Free, MIT)
+
+```csharp
+TypeAdapterConfig<Order, OrderDto>.NewConfig()
+    .Map(d => d.CustomerName, s => s.Customer.Name)
+    .Map(d => d.ItemCount,    s => s.Lines.Sum(l => l.Quantity))
+    .Map(d => d.Total,        s => s.Lines.Sum(l => l.Quantity * l.UnitPrice))
+    .Map(d => d.CreatedAtIso, s => s.CreatedAt.ToString("O"));
+
+// one-off
+var dto = order.Adapt<OrderDto>();
+
+// DI-friendly registration
+services.AddSingleton(TypeAdapterConfig.GlobalSettings);
+services.AddScoped<IMapper, ServiceMapper>();
+
+// EF Core projection (strong suit)
+var mappedList = dbContext.Orders
+    .ProjectToType<OrderDto>()   // Mapster projection
+    .ToList();
+```
+
+**NuGet Packages:**
+
+- https://www.nuget.org/packages/Mapster 
+- https://www.nuget.org/packages/Mapster.DependencyInjection
+- https://www.nuget.org/packages/Mapster.SourceGenerator (for performance improvement)
+
+---
+
+#### AgileMapper Example (Free, Apache-2.0)
+
+```csharp
+var mapper = Mapper.CreateNew(cfg =>
+{
+    cfg.WhenMapping
+       .From<Order>()
+       .To<OrderDto>()
+       .Map(ctx => ctx.Source.Customer.Name).To(dto => dto.CustomerName)
+       .Map(ctx => ctx.Source.Lines.Sum(l => l.Quantity)).To(dto => dto.ItemCount)
+       .Map(ctx => ctx.Source.Lines.Sum(l => l.Quantity * l.UnitPrice)).To(dto => dto.Total)
+       .Map(ctx => ctx.Source.CreatedAt.ToString("O")).To(dto => dto.CreatedAtIso);
+});
+
+var mappedDto = mapper.Map(order).ToANew<OrderDto>();
+```
+
+**NuGet Packages:**
+
+* https://www.nuget.org/packages/AgileObjects.AgileMapper
+
+
+---
+
+#### Manual (Pure) Mapping (no library)
+
+Straightforward, fastest, and most explicit. Good for simple applications which doesn't need long term maintenance.  Hand-written mapping is faster, safer, and more maintainable. And for tiny mappings, you can still use manual mapping.
+
+* Examples of when manual mapping is better than libraries.
+
+```csharp
+public static class OrderMapping
+{
+    public static OrderDto ToDto(this Order s) => new()
+    {
+        Id = s.Id,
+        CustomerName = s.Customer.Name,
+        ItemCount = s.Lines.Sum(l => l.Quantity),
+        Total = s.Lines.Sum(l => l.Quantity * l.UnitPrice),
+        CreatedAtIso = s.CreatedAt.ToString("O")
+    };
+}
+
+// usage
+var dto = order.ToDto();
+
+// EF Core projection (best for perf + SQL translation)
+var mappedList = dbContext.Orders.Select(s => new OrderDto
+    {
+        Id = s.Id,
+        CustomerName = s.Customer.Name,
+        ItemCount = s.Lines.Sum(l => l.Quantity),
+        Total = s.Lines.Sum(l => l.Quantity * l.UnitPrice),
+        CreatedAtIso = s.CreatedAt.ToString("O")
+    }).ToList();
+```
+
+
+
+### Conclusion
+
+If you rely on AutoMapper today, it’s time to evaluate alternatives. For ABP Framework, we chose **Mapperly** due to active development, strong community, and compile-time performance. But your team may prefer **Mapster** for flexibility or even manual mapping for small apps. Your requirements might be different, your project is not a framework so you decide the best one for you.

docs/en/Community-Articles/2025-08-27-Building-a-permission-based-authorization-system-for-net-core/POST.md

@@ -0,0 +1,174 @@
+# Building a Permission-Based Authorization System for ASP.NET Core
+
+In this article, we'll explore different authorization approaches in ASP.NET Core and examine how ABP's permission-based authorization system works.
+
+First, we'll look at some of the core authorization types that come with ASP.NET Core, such as role-based, claims-based, policy-based, and resource-based authorization. We'll briefly review the pros and cons of each approach.
+
+Then, we'll dive into [ABP's Permission-Based Authorization System](https://abp.io/docs/latest/framework/fundamentals/authorization#permission-system). This is a more advanced approach that gives you fine-grained control over what users can do in your application. We'll also explore ABP's Permission Management Module, which makes managing permissions through the UI easily.
+
+## Understanding ASP.NET Core Authorization Types
+
+Before diving into permission-based authorization, let's examine some of the core authorization types available in ASP.NET Core:
+
+- **[Role-Based Authorization](https://learn.microsoft.com/en-us/aspnet/core/security/authorization/roles?view=aspnetcore-9.0)** checks if the current user belongs to specific roles (like **"Admin"** or **"User"**) and grants access based on these roles. (For example, only users in the **"Manager"** role can access the employee salary management page.)
+
+- **[Claims-Based Authorization](https://learn.microsoft.com/en-us/aspnet/core/security/authorization/claims?view=aspnetcore-9.0)** uses key-value pairs (claims) that describe user attributes, such as age, department, or security clearance. (For example, only users with a **"Department=Finance"** claim can view financial reports.) This provides more granular control but requires careful claim management (such as grouping claims under policies).
+
+- **[Policy-Based Authorization](https://learn.microsoft.com/en-us/aspnet/core/security/authorization/policies?view=aspnetcore-9.0)** combines multiple requirements (roles, claims, custom logic) into reusable policies. It offers flexibility and centralized management, and **this is exactly why ABP's permission system is built on top of it!** (We'll discuss this in more detail later.)
+
+- **[Resource-Based Authorization](https://learn.microsoft.com/en-us/aspnet/core/security/authorization/resourcebased?view=aspnetcore-9.0)** determines access by examining both the user and the specific item they want to access. (For example, a user can edit only their own blog posts, not others' posts.) Unlike policy-based authorization which applies the same rules everywhere, resource-based authorization makes decisions based on the actual data being accessed, requiring more complex implementation.
+
+Here's a quick comparison of these approaches:
+
+| Authorization Type | Pros | Cons |
+|-------------------|------|------|
+| **Role-Based** | Simple implementation, easy to understand | Becomes inflexible with complex role hierarchies |
+| **Claims-Based** | Granular control, flexible user attributes | Complex claim management, potential for claim explosion |
+| **Policy-Based** | Centralized logic, combines multiple requirements | Can become complex with numerous policies |
+| **Resource-Based** | Fine-grained per-resource control | Implementation complexity, resource-specific code |
+
+## What is Permission-Based Authorization?
+
+Permission-based authorization takes a different approach from other authorization types by defining specific permissions (like **"CreateUser"**, **"DeleteOrder"**, **"ViewReports"**) that represent granular actions within your application. These permissions can be assigned to users directly or through roles, providing both flexibility and clear action-based access control.
+
+ABP Framework's permission system is built on top of this approach and extends ASP.NET Core's policy-based authorization system, working seamlessly with it.
+
+## ABP Framework's Permission System
+
+ABP extends [ASP.NET Core Authorization](https://learn.microsoft.com/en-us/aspnet/core/security/authorization/introduction?view=aspnetcore-9.0) by adding **permissions** as automatic [policies](https://learn.microsoft.com/en-us/aspnet/core/security/authorization/policies?view=aspnetcore-9.0) and allows the authorization system to be used in application services as well.
+
+This system provides a clean abstraction while maintaining full compatibility with ASP.NET Core's authorization infrastructure.
+
+ABP also provides a [Permission Management Module](https://abp.io/docs/latest/modules/permission-management) that offers a complete UI and API for managing permissions. This allows you to easily manage permissions in the UI, assign permissions to roles or users, and much more. (We'll see how to use it in the following sections.)
+
+### Defining Permissions in ABP
+
+In ABP, permissions are defined in classes (typically under the `*.Application.Contracts` project) that inherit from the `PermissionDefinitionProvider` class. Here's how you can define permissions for a book management system:
+
+```csharp
+public class BookStorePermissionDefinitionProvider : PermissionDefinitionProvider
+{
+    public override void Define(IPermissionDefinitionContext context)
+    {
+        var bookStoreGroup = context.AddGroup("BookStore");
+
+        var booksPermission = bookStoreGroup.AddPermission("BookStore.Books", L("Permission:Books"));
+        booksPermission.AddChild("BookStore.Books.Create", L("Permission:Books.Create"));
+        booksPermission.AddChild("BookStore.Books.Edit", L("Permission:Books.Edit"));
+        booksPermission.AddChild("BookStore.Books.Delete", L("Permission:Books.Delete"));
+    }
+
+    private static LocalizableString L(string name)
+    {
+        return LocalizableString.Create<BookStoreResource>(name);
+    }
+}
+```
+
+ABP automatically discovers this class and registers the permissions/policies in the system. You can then assign these permissions/policies to users/roles. There are two ways to do this:
+
+* Using the [Permission Management Module](https://abp.io/docs/latest/modules/permission-management)
+* Using the `IPermissionManager` service (via code)
+
+#### Setting Permissions to Roles and Users via Permission Management Module
+
+When you define a permission, it also becomes usable in the ASP.NET Core authorization system as a **policy name**. If you are using the [Permission Management Module](https://abp.io/docs/latest/modules/permission-management), you can manage the permissions through the UI:
+
+![](permission-management-module.png)
+
+In the permission management UI, you can grant permissions to roles and users through the **Role Management** and **User Management** pages within the "permissions" modals. You can then easily check these permissions in your code. In the screenshot above, you can see the permission modal for the user's page, clearly showing the permissions granted to the user by their role. (**(R)** in the UI indicates that the permission is granted by one of the current user's roles.)
+
+#### Setting Permissions to Roles and Users via Code
+
+You can also set permissions for roles and users programmatically. You just need to inject the `IPermissionManager` service and use its `SetForRoleAsync` and `SetForUserAsync` methods (or similar methods):
+
+```csharp
+public class MyService : ITransientDependency
+{
+    private readonly IPermissionManager _permissionManager;
+
+    public MyService(IPermissionManager permissionManager)
+    {
+        _permissionManager = permissionManager;
+    }
+
+    public async Task GrantPermissionForUserAsync(Guid userId, string permissionName)
+    {
+        await _permissionManager.SetForUserAsync(userId, permissionName, true);
+    }
+
+    public async Task ProhibitPermissionForUserAsync(Guid userId, string permissionName)
+    {
+        await _permissionManager.SetForUserAsync(userId, permissionName, false);
+    }
+}
+```
+
+### Checking Permissions in AppServices and Controllers
+
+ABP provides multiple ways to check permissions. The most common approach is using the `[Authorize]` attribute and passing the permission/policy name.
+
+Here is an example of how to check permissions in an application service:
+
+```csharp
+[Authorize("BookStore.Books")]
+public class BookAppService : ApplicationService, IBookAppService
+{
+    [Authorize("BookStore.Books.Create")]
+    public async Task<BookDto> CreateAsync(CreateBookDto input)
+    {
+        //logic here
+    }
+}
+```
+
+> Notice that you can use the `[Authorize]` attribute at both class and method levels. In the example above, the `CreateAsync` method is marked with the `[Authorize]` attribute, so it will check the user's permission before executing the method. Since the application service class also has a permission requirement, both permissions must be granted to the user to execute the method!
+
+And here is an example of how to check permissions in a controller:
+
+```csharp
+[Authorize("BookStore.Books")]
+public class CreateBookController : AbpController
+{
+    //omitted for brevity...
+}
+```
+
+### Programmatic Permission Checking
+
+To conditionally control authorization in your code, you can use the `IAuthorizationService` service:
+
+```csharp
+public class BookAppService : ApplicationService, IBookAppService
+{
+    public async Task<BookDto> CreateAsync(CreateBookDto input)
+    {
+        // Checks the permission and throws an exception if the user does not have the permission
+        await AuthorizationService.CheckAsync(BookStorePermissions.Books.Create);
+        
+        // Your logic here
+    }
+
+    public async Task<bool> CanUserCreateBooksAsync()
+    {
+        // Checks if the permission is granted for the current user
+        return await AuthorizationService.IsGrantedAsync(BookStorePermissions.Books.Create);
+    }
+}
+```
+
+You can use the `IAuthorizationService`'s helpful methods for authorization checking, as shown in the example above:
+
+- `IsGrantedAsync` checks if the current user has the given permission.
+- `CheckAsync` throws an exception if the current user does not have the given permission.
+- `AuthorizeAsync` checks if the current user has the given permission and returns an `AuthorizationResult`, which has a `Succeeded` property that you can use to verify if the user has the permission.
+
+Also notice that we did not inject the `IAuthorizationService` in the constructor, because we are using the `ApplicationService` base class, which already provides property injection for it. This means we can directly use it in our application services, just like other helpful base services (such as `ICurrentUser` and `ICurrentTenant`).
+
+## Conclusion
+
+Permission-based authorization in ABP Framework provides a powerful and flexible approach to securing your applications. By building on ASP.NET Core's policy-based authorization, ABP offers a clean abstraction that simplifies permission management while maintaining the full power of the underlying system.
+
+The ability to check permissions in both application services and controllers makes ABP Framework's authorization system very flexible and powerful, yet easy to use.
+
+Additionally, the Permission Management Module makes it very easy to manage permissions and roles through the UI. You can learn more about how it works in the [documentation](https://abp.io/docs/latest/modules/permission-management).

docs/en/docs-nav.json

@@ -2345,11 +2345,91 @@
         },
         {
           "text": "CMS Kit",
-          "path": "modules/cms-kit"
+          "isLazyExpandable": true,
+          "path": "modules/cms-kit",
+          "items": [
+            {
+              "text": "Overview",
+              "path": "modules/cms-kit.md",
+              "isIndex": true
+            },
+            {
+              "text": "Pages",
+              "path": "modules/cms-kit/pages.md"
+            },
+            {
+              "text": "Blogging",
+              "path": "modules/cms-kit/blogging.md"
+            },
+            {
+              "text": "Tag Management",
+              "path": "modules/cms-kit/tags.md"
+            },
+            {
+              "text": "Comments",
+              "path": "modules/cms-kit/comments.md"
+            },
+            {
+              "text": "Reaction System",
+              "path": "modules/cms-kit/reactions.md"
+            },
+            {
+              "text": "Rating System",
+              "path": "modules/cms-kit/ratings.md"
+            },
+            {
+              "text": "Menus",
+              "path": "modules/cms-kit/menus.md"
+            },
+            {
+              "text": "Global Resources",
+              "path": "modules/cms-kit/global-resources.md"
+            },
+            {
+              "text": "Dynamic Widget",
+              "path": "modules/cms-kit/dynamic-widget.md"
+            },
+            {
+              "text": "Marked Item System",
+              "path": "modules/cms-kit/marked-items.md"
+            }
+          ]
         },
         {
           "text": "CMS Kit (Pro)",
-          "path": "modules/cms-kit-pro"
+          "isLazyExpandable": true,
+          "path": "modules/cms-kit-pro",
+          "items": [
+            {
+              "text": "Overview",
+              "path": "modules/cms-kit-pro.md",
+              "isIndex": true
+            },
+            {
+              "text": "Newsletter System",
+              "path": "modules/cms-kit-pro/newsletter.md"
+            },
+            {
+              "text": "Contact Management",
+              "path": "modules/cms-kit-pro/contact-form.md"
+            },
+            {
+              "text": "URL Forwarding System",
+              "path": "modules/cms-kit-pro/URL-forwarding.md"
+            },
+            {
+              "text": "Poll System",
+              "path": "modules/cms-kit-pro/poll.md"
+            },
+            {
+              "text": "Page Feedback System",
+              "path": "modules/cms-kit-pro/page-feedback.md"
+            },
+            {
+              "text": "FAQ System",
+              "path": "modules/cms-kit-pro/faq.md"
+            }
+          ]
         },
         {
           "text": "Docs",

docs/en/framework/architecture/multi-tenancy/index.md

@@ -231,18 +231,20 @@ services.Configure<AbpAspNetCoreMultiTenancyOptions>(options =>
 If you change the `TenantKey`, make sure to pass it to `provideAbpCore` via `withOptions` method in the Angular client as follows:
 
 ```js
-@NgModule({
+// app.config.ts
+// ...
+export const appConfig: ApplicationConfig = {
   providers: [
+    // ...
     provideAbpCore(
       withOptions({
         // ...
         tenantKey: "MyTenantKey",
       })
     ),
+    // ...
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
 If you need to access it, you can inject it as follows:

docs/en/framework/infrastructure/object-to-object-mapping.md

@@ -302,6 +302,23 @@ public partial class UserToUserDtoMapper : MapperBase<User, UserDto>
 
 It is suggested to use the `MapExtraPropertiesAttribute` attribute if both classes are extensible objects (implement the `IHasExtraProperties` interface). See the [object extension document](../fundamentals/object-extensions.md) for more.
 
+### Property Setter Method
+
+Mapperly requires that properties of both source and destination objects have `setter` methods. Otherwise, the property will be ignored. You can use `protected set` or `private set` to control the visibility of the `setter` method, but each property must have a `setter` method.
+
+### Deep Cloning
+
+By default, Mapperly does not create deep copies of objects to improve performance. If an object can be directly assigned to the target, it will do so (e.g., if the source and target type are both `List<T>`, the list and its entries will not be cloned). To create deep copies, set the `UseDeepCloning` property on the `MapperAttribute` to `true`.
+
+````csharp
+[Mapper(UseDeepCloning = true)]
+public partial class UserToUserDtoMapper : MapperBase<User, UserDto>
+{
+    public override partial UserDto Map(User source);
+    public override partial void Map(User source, UserDto destination);
+}
+````
+
 ### Lists and Arrays Support
 
 ABP Mapperly integration also supports mapping lists and arrays as explained in the [IObjectMapper<TSource, TDestination> Interface](#iobjectmappertsource-tdestination-interface) section. 

docs/en/framework/ui/angular/account-module.md

@@ -17,36 +17,35 @@ npm install @abp/ng.account
 
 > Make sure v4.3 or higher version is installed.
 
-Open the `app.module.ts` and add `provideAccountConfig()` to the providers array as shown below:
+Open the `app.config.ts` and add `provideAccountConfig()` to the providers array as shown below:
 
 ```js
-// app.module.ts
+// app.config.ts
 
 import { provideAccountConfig } from "@abp/ng.account/config";
-//...
+// ...
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-    //...
+    // ...
     provideAccountConfig(),
+    // ...
   ],
-  //...
-})
-export class AppModule {}
+};
 ```
 
-Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
+Open the `app.routes.ts` and add the `account` route to `APP_ROUTES` array as follows:
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+export const APP_ROUTES: Routes = [
   //...
   {
     path: 'account',
-    loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
+    loadChildren: () => import('@abp/ng.account').then(c => c.createRoutes()),
   },
   //...
-export class AppRoutingModule {}
+];
 ```
 
 ## Account Public Module Implementation for Commercial Templates
@@ -59,42 +58,42 @@ npm install @volo/abp.ng.account
 
 > Make sure v4.3 or higher version is installed.
 
-Open the `app.module.ts` and add `AccountPublicConfigModule.forRoot()` to the imports array as shown below:
+Open the `app.config.ts` and add `provideAccountPublicConfig()` to the providers array as shown below:
 
-> Ensure that the `Account Layout Module` has been added if you are using the Lepton X theme. If you miss the step, you will get an error message that says `Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "AccountLayoutModule.forRoot()" to your app.module configuration.` when you try to access the account pages. Otherwise, you can skip adding the `AccountLayoutModule` step.
+> Ensure that the `Account Layout Provider` has been added if you are using the Lepton X theme. If you miss the step, you will get an error message that says `Account layout not found. Please check your configuration. If you are using LeptonX, please make sure you have added "provideAccountLayout()" to your app configuration.` Otherwise, you can skip adding the `provideAccountLayout()` step.
 
 ```js
-// app.module.ts
+// app.config.ts
 
-import { AccountPublicConfigModule } from "@volo/abp.ng.account/public/config";
-// if you are using or want to use Lepton X, you should add AccountLayoutModule
-// import { AccountLayoutModule } from '@volosoft/abp.ng.theme.lepton-x/account'
+import { provideAccountPublicConfig } from "@volo/abp.ng.account/public/config";
+// if you are using or want to use Lepton X, you should add provideAccountLayout
+// import { provideAccountLayout } from '@volosoft/abp.ng.theme.lepton-x/account'
 
 //...
 
-@NgModule({
-  imports: [
-    //...
-    AccountPublicConfigModule.forRoot(),
-    // AccountLayoutModule.forRoot() // Only for Lepton X
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideAccountPublicConfig(),
+    provideAccountLayout() // Only for Lepton X
+    // ...
   ],
-  //...
-})
-export class AppModule {}
+};
 ```
 
-Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
+Open the `app.routes.ts` and add the `account` route to `APP_ROUTES` array as follows:
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+
+export const APP_ROUTES: Routes = [
   //...
   {
     path: 'account',
-    loadChildren: () => import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy()),
+    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.createRoutes()),
   },
   //...
-export class AppRoutingModule {}
+];
 ```
 
 ## My Account Page
@@ -108,15 +107,15 @@ When the user changes their own data on the personal settings tab in My Account,
 If you want to disable these warning, You should set `isPersonalSettingsChangedConfirmationActive` false
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+export const APP_ROUTES: Routes = [
   //...
   {
     path: 'account',
-    loadChildren: () => import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy({ isPersonalSettingsChangedConfirmationActive:false })),
+    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.create({ isPersonalSettingsChangedConfirmationActive:false })),
   },
   //...
-export class AppRoutingModule {}
+];
 ```
 
 ## Security Logs Page [COMMERCIAL]

docs/en/framework/ui/angular/authorization.md

@@ -61,15 +61,18 @@ The `AuthErrorFilterService` is an abstract service that needs to be replaced wi
 
 ### Usage
 
-#### 1.Create an auth-filter.provider
+#### 1.Create an auth filter provider
 
 ```js
-import { APP_INITIALIZER, inject } from '@angular/core';
+//auth-filter.provider.ts
+import { inject, provideAppInitializer } from '@angular/core';
 import { AuthErrorFilter, AuthErrorEvent, AuthErrorFilterService } from '@abp/ng.core';
 import { eCustomersAuthFilterNames } from '../enums';
 
 export const CUSTOMERS_AUTH_FILTER_PROVIDER = [
-  { provide: APP_INITIALIZER, useFactory: configureAuthFilter, multi: true },
+  provideAppInitializer(() => {
+      configureAuthFilter()
+  }),
 ];
 
 type Reason = object & { error: { grant_type: string | undefined } };
@@ -100,20 +103,17 @@ function configureAuthFilter() {
   - `executable:` a status for the filter object. If it's false then it won't work, yet it'll stay in the list
   - `execute:` a function that stores the skip logic
 
-#### 2.Add to the FeatureConfigModule
+#### 2.Add to the customer configuration provider
 
 ```js
-import { ModuleWithProviders, NgModule } from "@angular/core";
-import { CUSTOMERS_AUTH_FILTER_PROVIDER } from "./providers/auth-filter.provider";
-
-@NgModule()
-export class CustomersConfigModule {
-  static forRoot(): ModuleWithProviders<CustomersConfigModule> {
-    return {
-      ngModule: CustomersConfigModule,
-      providers: [CUSTOMERS_AUTH_FILTER_PROVIDER],
-    };
-  }
+// customer-config.provider.ts
+import { EnvironmentProviders, makeEnvironmentProviders } from "@angular/core";
+import { CUSTOMERS_AUTH_FILTER_PROVIDER } from "./auth-filter.provider";
+
+export function provideCustomerConfig(): EnvironmentProviders {
+  return makeEnvironmentProviders([
+    CUSTOMERS_AUTH_FILTER_PROVIDER
+  ])
 }
 ```
 

docs/en/framework/ui/angular/basic-theme.md

@@ -11,10 +11,9 @@ The Basic Theme is a theme implementation for the Angular UI. It is a minimalist
 If you need to manually this theme, follow the steps below:
 
 * Install the [@abp/ng.theme.basic](https://www.npmjs.com/package/@abp/ng.theme.basic) NPM package to your Angular project.
-* Open the `src/app/app.module.ts` file, import `ThemeBasicModule`,`provideThemeBasicConfig` (it can be imported from `@abp/ng.theme.basic` package), and add `ThemeBasicModule` to the `imports` array and provide `provideThemeBasicConfig()` to the providers array.
-* Open the `src/app/shared/shared.module` file, import `ThemeBasicModule` (it can be imported from `@abp/ng.theme.basic` package), and add `ThemeBasicModule` to the `imports` and `exports` array.
+* Open the `src/app/app.config.ts` file, import `provideThemeBasicConfig` (it can be imported from `@abp/ng.theme.basic` package), and provide `provideThemeBasicConfig()` to the providers array.
 
-The `ThemeBasicModule` is registered own layouts (`ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`) to a service which is exposed by `@abp/ng.core` package on application initialization. 
+The `BASIC_THEME_STYLES_PROVIDERS` has registered three layouts being `ApplicationLayoutComponent`, `AccountLayoutComponent`, and `EmptyLayoutComponent`. These are provided inside `provideThemeBasicConfig()` function that is exposed by `@abp/ng.theme.basic` package on application initialization.
 
 ## Application Layout
 

docs/en/framework/ui/angular/caps-lock-directive.md

@@ -5,66 +5,27 @@ In password inputs, You may want to show if Caps Lock is on. To make this even e
 
 ## Getting Started
 
-`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related module or your standalone component:
-
-**Importing to NgModule**
-```ts
-import { TrackCapsLockDirective } from '@abp/ng.core';
-
-@NgModule({
-  //...
-  declarations: [
-   ...,
-   TestComponent
-  ],
-  imports: [
-   ...,
-   TrackCapsLockDirective
-  ],
-})
-export class MyFeatureModule {}
-```
-
-## Usage
-
-The `TrackCapsLockDirective` is very easy to use. The directive's selector is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user.
+`TrackCapsLockDirective` is standalone. In order to use the `TrackCapsLockDirective` in an HTML template, import it to related component. The selector of the directive is **`abpCapsLock`**. By adding the `abpCapsLock` event to an element, you can track the status of Caps Lock. You can use this to warn user.
 
 See an example usage:
 
-**NgModule Component usage**
-```ts
-@Component({
-  selector: 'test-component',
-  template: `
-    <div class="d-flex flex-column">
-      <label>Password</label>
-      <input (abpCapsLock)="capsLock = $event"/>
-      <i *ngIf="capsLock">icon</i>
-    </div>
-  `
-})
-export class TestComponent{
-  capsLock = false;
-}
-```
-
-**Standalone Component usage**
 ```ts
 import { TrackCapsLockDirective } from '@abp/ng.core'
 
 @Component({
-  selector: 'standalone-component',
-  standalone: true,
+  selector: 'sample-component',
   template: `
     <div class="d-flex flex-column">
       <label>Password</label>
       <input (abpCapsLock)="capsLock = $event"/>
-      <i *ngIf="capsLock">icon</i>
+      @if (capslock) {
+        <i>icon</i>
+      }
     </div>
   `,
   imports: [TrackCapsLockDirective]
 })
-export class StandaloneComponent{
+export class SampleComponent{
   capsLock = false;
 }
 ```

docs/en/framework/ui/angular/card-component.md

@@ -23,27 +23,7 @@ In addition to these components, the Card component provides directives like `Ca
 
 # Usage
 
-ABP Card Component is a part of the `ThemeSharedModule` module. If you've imported that module into your module, you don't need to import it again. If not, first import it as shown below:
-
-```ts
-// my-feature.module.ts
-
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { CardDemoComponent } from './card-demo.component';
-
-@NgModule({
-  imports: [
-    ThemeSharedModule ,
-    // ...
-  ],
-  declarations: [CardDemoComponent],
-  // ...
-})
-export class MyFeatureModule {}
-
-```
-
-Then, the `abp-card` component can be used. See the examples below:
+ABP Card Component is a part of the `theme-shared` package. Once you import the necessary components, you can use them. See the examples below:
 
 ## CardBody
 
@@ -51,16 +31,18 @@ Then, the `abp-card` component can be used. See the examples below:
 // card-demo.component.ts
 
 import { Component } from '@angular/core';
+import { CardComponent, CardBodyComponent } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-card-demo',
+  imports: [CardComponent, CardBodyComponent],
   template: ` 
     <abp-card [cardStyle]="{width: '18rem'}">
       <abp-card-body>This is some text within a card body</abp-card-body>
     </abp-card> 
   `,
 })
-export class CardDemoComponent { }
+export class CardDemoComponent {}
 ```
 See the card body result below:
 
@@ -72,22 +54,36 @@ See the card body result below:
 
 //card-demo.component.ts
 import { Component } from '@angular/core';
+import { 
+  CardComponent,
+  CardBodyComponent,
+  CardTitleDirective,
+  CardSubtitleDirective
+} from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-card-demo',
+  imports: [
+    CardComponent,
+    CardBodyComponent,
+    CardTitleDirective,
+    CardSubtitleDirective
+  ],
   template: ` 
     <abp-card [cardStyle]="{width: '18rem'}">
       <abp-card-body>
         <h5 abpCardTitle>Card Title</h5>
         <h6 abpCardSubtitle class="mb-2 text-muted">Card subtitle</h6>
-        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
-        <a href="#" class="card-link" >Card link</a>
-        <a href="#" class="card-link" >Another link</a>
+        <p class="card-text">
+          Some quick example text to build on the card title and make up the bulk of the card's content.
+        </p>
+        <a href="#" class="card-link">Card link</a>
+        <a href="#" class="card-link">Another link</a>
       </abp-card-body>
     </abp-card> 
   `,
 })
-export class CardDemoComponent { }
+export class CardDemoComponent {}
 ```
 See the card title, text and link result below:
 
@@ -99,19 +95,23 @@ See the card title, text and link result below:
 
 //card-demo.component.ts
 import { Component } from '@angular/core';
+import { CardComponent, CardBodyComponent, CardImgTopDirective } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-card-demo',
+  imports: [CardComponent, CardBodyComponent, CardImgTopDirective],
   template: ` 
     <abp-card [cardStyle]="{width:'18rem'}">
       <img abpCardImgTop src="..." alt="...">
       <abp-card-body>
-        <p class="card-text" >Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <p class="card-text">
+          Some quick example text to build on the card title and make up the bulk of the card's content.
+        </p>
       </abp-card-body>
     </abp-card>
   `,
 })
-export class CardDemoComponent { }
+export class CardDemoComponent {}
 ```
 See the card image result below:
 
@@ -123,9 +123,11 @@ See the card image result below:
 
 //card-demo.component.ts
 import { Component } from '@angular/core';
+import { CardComponent } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-card-demo',
+  imports: [CardComponent],
   template: ` 
     <abp-card [cardStyle]="{width:'18rem'}">
       <ul class="list-group list-group-flush">
@@ -136,7 +138,7 @@ import { Component } from '@angular/core';
     </abp-card>
   `,
 })
-export class CardDemoComponent { }
+export class CardDemoComponent {}
 ```
 See the group list result below:
 
@@ -148,15 +150,29 @@ See the group list result below:
 
 //card-demo.component.ts
 import { Component } from '@angular/core';
+import { 
+  CardComponent,
+  CardBodyComponent,
+  CardImgTopDirective,
+  CardTitleDirective
+} from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-card-demo',
+  imports: [
+    CardComponent,
+    CardBodyComponent,
+    CardImgTopDirective,
+    CardTitleDirective
+  ],
   template: ` 
     <abp-card [cardStyle]="{width:'18rem'}">
       <img abpCardImgTop src="../../assets/thinh-nguyen-aRrS37GKlVA-unsplash.jpg" alt="...">
       <abp-card-body>
         <h5 abpCardTitle>Card title</h5>
-        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <p class="card-text">
+          Some quick example text to build on the card title and make up the bulk of the card's content.
+        </p>
       </abp-card-body>
       <ul class="list-group list-group-flush">
         <li class="list-group-item">An item</li>
@@ -170,7 +186,7 @@ import { Component } from '@angular/core';
     </abp-card>
   `,
 })
-export class CardDemoComponent { }
+export class CardDemoComponent {}
 ```
 See kitchen sink result below:
 
@@ -182,15 +198,31 @@ See kitchen sink result below:
 
 //card-demo.component.ts
 import { Component } from '@angular/core';
+import { 
+  CardComponent,
+  CardHeaderComponent,
+  CardBodyComponent,
+  CardTitleDirective,
+  CardFooterComponent
+} from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-card-demo',
+  imports: [
+    CardComponent,
+    CardHeaderComponent,
+    CardBodyComponent,
+    CardTitleDirective,
+    CardFooterComponent
+  ],
   template: ` 
     <abp-card class="text-center">
       <abp-card-header>Featured</abp-card-header>
       <abp-card-body>
         <h5 abpCardTitle>Special title treatment</h5>
-        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
+        <p class="card-text">
+          With supporting text below as a natural lead-in to additional content.
+        </p>
         <a class="card-link" href="#" class="btn btn-primary">Go somewhere</a>
       </abp-card-body>
       <abp-card-footer class="text-muted">
@@ -199,7 +231,7 @@ import { Component } from '@angular/core';
     </abp-card>
   `,
 })
-export class CardDemoComponent { }
+export class CardDemoComponent {}
 ```
 See the header and footer result below:
 

docs/en/framework/ui/angular/chart-component.md

@@ -6,34 +6,16 @@ ABP Chart component exposed by `@abp/ng.components/chart.js` is based on [`chart
 
 ## How to Use
 
-First of all, need to import the `ChartModule` to your feature module as follows:
-
-```ts
-// your-feature.module.ts
-
-import { ChartModule } from "@abp/ng.components/chart.js";
-import { ChartDemoComponent } from "./chart-demo.component";
-
-@NgModule({
-  imports: [
-    ChartModule,
-    // ...
-  ],
-  declarations: [ChartDemoComponent],
-  // ...
-})
-export class YourFeatureModule {}
-```
-
-Then, `abp-chart` component can be used. See an example:
+First of all, need to import the `ChartComponent` to your component. Then, `abp-chart` component can be used. See an example:
 
 ```ts
 // chart-demo.component.ts
-
 import { Component } from "@angular/core";
+import { ChartComponent } from "@abp/ng.components/chart.js";
 
 @Component({
   selector: "app-chart-demo",
+  imports: [ChartComponent],
   template: ` <abp-chart type="pie" [data]="data"></abp-chart> `,
 })
 export class ChartDemoComponent {
@@ -62,9 +44,11 @@ See the result:
 
 ```ts
 import { Component } from "@angular/core";
+import { ChartComponent } from "@abp/ng.components/chart.js";
 
 @Component({
   selector: "app-chart-demo",
+  imports: [ChartComponent],
   template: `
     <abp-chart
       type="doughnut"
@@ -73,7 +57,7 @@ import { Component } from "@angular/core";
       width="400px"
       height="400px"
       [plugins]="myPlugin"
-    ></abp-chart>
+    />
   `,
 })
 export class ChartDemoComponent {
@@ -119,16 +103,18 @@ Result:
 
 ```ts
 import { Component } from "@angular/core";
+import { ChartComponent } from "@abp/ng.components/chart.js";
 
 @Component({
   selector: "app-chart-demo",
+  imports: [ChartComponent]
   template: `
     <abp-chart
       type="bar"
       [data]="data"
       width="400px"
       height="400px"
-    ></abp-chart>
+    />
   `,
 })
 export class ChartDemoComponent {
@@ -158,16 +144,18 @@ Result:
 
 ```ts
 import { Component } from "@angular/core";
+import { ChartComponent } from "@abp/ng.components/chart.js";
 
 @Component({
   selector: "app-chart-demo",
+  imports: [ChartComponent]
   template: `
     <abp-chart
       type="radar"
       [data]="data"
       width="400px"
       height="400px"
-    ></abp-chart>
+    />
 
     <button class="btn btn-primary-outline mt-4" (click)="addDataset()">
       Add dataset

docs/en/framework/ui/angular/component-replacement.md

@@ -6,7 +6,7 @@ The reason that you **can replace** but **cannot customize** default ABP compone
 
 ## How to Replace a Component
 
-Create a new component that you want to use instead of an ABP component. Add that component to `declarations` and `entryComponents` in the `AppModule`.
+Create a new component that you want to use instead of an ABP component.
 
 Then, open the `app.component.ts` and execute the `add` method of `ReplaceableComponentsService` to replace your component with an ABP component as shown below:
 
@@ -32,7 +32,7 @@ export class AppComponent {
 
 ## How to Replace a Layout
 
-Each ABP theme module has 3 layouts named `ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. These layouts can be replaced the same way.
+Each ABP theme package has 3 layouts named `ApplicationLayoutComponent`, `AccountLayoutComponent`, `EmptyLayoutComponent`. These layouts can be replaced the same way.
 
 > A layout component template should contain `<router-outlet></router-outlet>` element.
 
@@ -70,7 +70,7 @@ export class AppComponent {
 }
 ```
 
-> If you like to replace a layout component at runtime (e.g: changing the layout by pressing a button), pass the second parameter of the `add` method of `ReplaceableComponentsService` as true. DynamicLayoutComponent loads content using a router-outlet. When the second parameter of the `add` method is true, the route will be refreshed, so use it with caution. Your component state will be gone and any initiation logic (including HTTP requests) will be repeated.
+> If you would like to replace a layout component at runtime (e.g: changing the layout by pressing a button), pass the second parameter of the `add` method of `ReplaceableComponentsService` as true. DynamicLayoutComponent loads content using a router-outlet. When the second parameter of the `add` method is true, the route will be refreshed, so use it with caution. Your component state will be gone and any initiation logic (including HTTP requests) will be repeated.
 
 ### Layout Components
 
@@ -96,8 +96,6 @@ This command will create a new component named `new-layout`. Now, open the new-l
 
 This 'router-outlet' will act as a placeholder that Angular dynamically fills based on the current router state.
 
-note: (don't forget: you should add the app in the app.module.ts file)
-
 #### Step 2: Define a Variable for the Layout Component
 
 Although this step is optional, it can be useful if you're going to use the layout component's value multiple times. You can define a variable for the layout component like this:
@@ -116,33 +114,29 @@ You can use this variable when you need to refer to the layout component.
 
 Next, you need to add the new layout component to the `ReplaceableComponentsService`. This service allows you to replace a component with another one dynamically.
 
-You can do this by defining a provider for `APP_INITIALIZER` that uses a factory function. In this function, you inject the `ReplaceableComponentsService` and use its `add` method to add the new layout component.
+You can do this by defining a provider for `provideAppInitializer` that uses a factory function. In this function, you inject the `ReplaceableComponentsService` and use its `add` method to add the new layout component.
 
 Here's how you can do it:
 
 ```javascript
 export const CUSTOM_LAYOUT_PROVIDERS = [
-  {
-    provide: APP_INITIALIZER,
-    useFactory: configureLayoutFn,
-    deps: [ReplaceableComponentsService],
-    multi: true,
-  },
+  provideAppInitializer(()=>{
+    configureLayoutFn();
+  }),
 ];
+
 function configureLayoutFn() {
   const service = inject(ReplaceableComponentsService);
-  return () => {
-    service.add({
-      key: eCustomLayout.component,
-      component: CustomLayoutComponent,
-    });
-  };
+  service.add({
+    key: eCustomLayout.component,
+    component: CustomLayoutComponent,
+  });
 }
 ```
 
-In this code, `configureLayoutFn` is a factory function that adds the new layout component to the `ReplaceableComponentsService`. The `APP_INITIALIZER` provider runs this function when the application starts.
+In this code, `configureLayoutFn` is a factory function that adds the new layout component to the `ReplaceableComponentsService`. The `provideAppInitializer` provider runs this function when the application starts.
 
-note: (don't forget: you should add the CUSTOM_LAYOUT_PROVIDERS in the app.module.ts file)
+note: (don't forget: you should add the CUSTOM_LAYOUT_PROVIDERS in the app.config.ts file)
 
 #### Step 4: Define the Application's Dynamic Layouts
 
@@ -154,14 +148,14 @@ You can add the new layout to the existing layouts like this:
 export const myDynamicLayouts = new Map<string, string>([...DEFAULT_DYNAMIC_LAYOUTS, [eCustomLayout.key, eCustomLayout.component]]);
 ```
 
-#### Step 5: Pass the Dynamic Layouts to the CoreModule
+#### Step 5: Pass the Dynamic Layouts to the Core Provider
 
-The final step is to pass the dynamic layouts to the `provideAbpCore` using the `withOptions` method. This method allows you to configure the module with a static method.
+The final step is to pass the dynamic layouts to the `provideAbpCore` using the `withOptions` method. This method allows you to configure the provider with a static method.
 
 Here's how you can do it:
 
 ```ts
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
     provideAbpCore(
@@ -172,8 +166,7 @@ Here's how you can do it:
       }),
     ),
   ],
-})
-export class AppModule {}
+};
 ```
 
 In this code, `myDynamicLayouts` is the map of dynamic layouts you defined earlier. We pass this map to the `provideAbpCore` using the `withOptions` method.
@@ -186,32 +179,33 @@ Here's how you can do it:
 // route.provider.ts
 import { eCustomLayout } from './custom-layout/custom-layout.provider';
 import { RoutesService, eLayoutType } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
+import { provideAppInitializer } from '@angular/core';
 
 export const APP_ROUTE_PROVIDER = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    configureRoutes();
+  }),
 ];
 
-function configureRoutes(routes: RoutesService) {
-  return () => {
-    routes.add([
-      {
-        path: '/',
-        name: '::Menu:Home',
-        iconClass: 'fas fa-home',
-        order: 1,
-        layout: eLayoutType.application,
-      },
-      {
-        path: '/dashboard',
-        name: '::Menu:Dashboard',
-        iconClass: 'fas fa-chart-line',
-        order: 2,
-        layout: eCustomLayout.key as eLayoutType,
-        requiredPolicy: 'MyProjectName.Dashboard.Host  || MyProjectName.Dashboard.Tenant',
-      },
-    ]);
-  };
+function configureRoutes() {
+  const routes = inject(RoutesService);
+  routes.add([
+    {
+      path: '/',
+      name: '::Menu:Home',
+      iconClass: 'fas fa-home',
+      order: 1,
+      layout: eLayoutType.application,
+    },
+    {
+      path: '/dashboard',
+      name: '::Menu:Dashboard',
+      iconClass: 'fas fa-chart-line',
+      order: 2,
+      layout: eCustomLayout.key as eLayoutType,
+      requiredPolicy: 'MyProjectName.Dashboard.Host  || MyProjectName.Dashboard.Tenant',
+    },
+  ]);
 }
 ```
 
@@ -288,10 +282,23 @@ Open the generated `routes.component.ts` in `src/app/routes` folder and replace
 
 ```js
 import { Component, HostBinding } from "@angular/core";
+import { CommonModule } from '@angular/common';
+import { RouterModule } from '@angular/router';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
+import { LocalizationPipe, PermissionDirective } from "@abp/ng.core";
+import { EllipsisDirective } from '@abp/ng.theme.shared';
 
 @Component({
   selector: "app-routes",
   templateUrl: "routes.component.html",
+  imports: [
+    CommonModule,
+    RouterModule,
+    NgbDropdownModule,
+    PermissionDirective,
+    EllipsisDirective,
+    LocalizationPipe,
+  ]
 })
 export class RoutesComponent {
   @HostBinding("class.mx-auto")
@@ -303,21 +310,6 @@ export class RoutesComponent {
 }
 ```
 
-Import the `SharedModule` to the `imports` array of `AppModule`:
-
-```js
-// app.module.ts
-
-import { SharedModule } from './shared/shared.module';
-
-@NgModule({
-  imports: [
-    //...
-    SharedModule
-  ]
-)}
-```
-
 Open the generated `routes.component.html` in `src/app/routes` folder and replace its content with the following:
 
 ```html
@@ -482,8 +474,12 @@ import {
   LanguageInfo,
   NAVIGATE_TO_MANAGE_PROFILE,
   SessionStateService,
+  LocalizationPipe
 } from '@abp/ng.core';
 import { Component, Inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import snq from 'snq';
@@ -491,6 +487,12 @@ import snq from 'snq';
 @Component({
   selector: 'app-nav-items',
   templateUrl: 'nav-items.component.html',
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgbDropdownModule,
+    LocalizationPipe
+  ]
 })
 export class NavItemsComponent {
   currentUser$: Observable<CurrentUserDto> = this.configState.getOne$('currentUser');
@@ -549,21 +551,6 @@ export class NavItemsComponent {
 }
 ```
 
-Import the `SharedModule` to the `imports` array of `AppModule`:
-
-```js
-// app.module.ts
-
-import { SharedModule } from './shared/shared.module';
-
-@NgModule({
-  imports: [
-    //...
-    SharedModule
-  ]
-)}
-```
-
 Open the generated `nav-items.component.html` in `src/app/nav-items` folder and replace the content with the following:
 
 ```html

docs/en/framework/ui/angular/config-state-service.md

@@ -13,11 +13,11 @@ import { ConfigStateService } from '@abp/ng.core';
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private config: ConfigStateService) {}
+   private config = inject(ConfigStateService);
 }
 ```
 
-You do not have to provide the `ConfigStateService` at module or component/directive level, because it is already **provided in root**.
+You do not have to provide the `ConfigStateService` at component or directive level, because it is already **provided in root**.
 
 ## Get Methods
 
@@ -35,9 +35,9 @@ You can use the `getAll` or `getAll$` method of `ConfigStateService` to get all
 const config = this.config.getAll();
 
 // or
-this.config.getAll$().subscribe(config => {
-   // use config here
-})
+this.config.getAll$().subscribe((config) => {
+  // use config here
+});
 ```
 
 ### How to Get a Specific Configuration
@@ -50,9 +50,9 @@ You can use the `getOne` or `getOne$` method of `ConfigStateService` to get a sp
 const currentUser = this.config.getOne("currentUser");
 
 // or
-this.config.getOne$("currentUser").subscribe(currentUser => {
-   // use currentUser here
-})
+this.config.getOne$("currentUser").subscribe((currentUser) => {
+  // use currentUser here
+});
 ```
 
 On occasion, you will probably want to be more specific than getting just the current user. For example, here is how you can get the `tenantId`:
@@ -61,9 +61,9 @@ On occasion, you will probably want to be more specific than getting just the cu
 const tenantId = this.config.getDeep("currentUser.tenantId");
 
 // or
-this.config.getDeep$("currentUser.tenantId").subscribe(tenantId => {
-   // use tenantId here
-})
+this.config.getDeep$("currentUser.tenantId").subscribe((tenantId) => {
+  // use tenantId here
+});
 ```
 
 or by giving an array of keys as parameter:
@@ -84,9 +84,11 @@ You can use the `getFeature` or `getFeature$` method of `ConfigStateService` to
 const enableLdapLogin = this.config.getFeature("Account.EnableLdapLogin");
 
 // or
-this.config.getFeature$("Account.EnableLdapLogin").subscribe(enableLdapLogin => {
-   // use enableLdapLogin here
-})
+this.config
+  .getFeature$("Account.EnableLdapLogin")
+  .subscribe((enableLdapLogin) => {
+    // use enableLdapLogin here
+  });
 ```
 
 > For more information, see the [features document](./features.md).
@@ -98,12 +100,16 @@ You can use the `getSetting` or `getSetting$` method of `ConfigStateService` to
 ```js
 // this.config is instance of ConfigStateService
 
-const twoFactorBehaviour = this.config.getSetting("Abp.Identity.TwoFactor.Behaviour");
+const twoFactorBehaviour = this.config.getSetting(
+  "Abp.Identity.TwoFactor.Behaviour"
+);
 
 // or
-this.config.getSetting$("Abp.Identity.TwoFactor.Behaviour").subscribe(twoFactorBehaviour => {
-   // use twoFactorBehaviour here
-})
+this.config
+  .getSetting$("Abp.Identity.TwoFactor.Behaviour")
+  .subscribe((twoFactorBehaviour) => {
+    // use twoFactorBehaviour here
+  });
 ```
 
 > For more information, see the [settings document](./settings.md).
@@ -112,7 +118,6 @@ this.config.getSetting$("Abp.Identity.TwoFactor.Behaviour").subscribe(twoFactorB
 
 Please refer to `ApplicationConfigurationDto` type for all the properties you can get with `getOne` and `getDeep`. It can be found in the [models.ts file](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/proxy/volo/abp/asp-net-core/mvc/application-configurations/models.ts#L11).
 
-
 ## Set State
 
 `ConfigStateService` has a method named `setState` which allow you to set the state value.
@@ -120,9 +125,12 @@ Please refer to `ApplicationConfigurationDto` type for all the properties you ca
 You can get the application configuration response and set the `ConfigStateService` state value as shown below:
 
 ```js
-import {AbpApplicationConfigurationService, ConfigStateService} from '@abp/ng.core';
+import { AbpApplicationConfigurationService, ConfigStateService } from '@abp/ng.core';
+
+private abpApplicationConfigurationService = inject(AbpApplicationConfigurationService);
+private config = inject(ConfigStateService);
 
-constructor(private abpApplicationConfigurationService: AbpApplicationConfigurationService, private config: ConfigStateService) {
+constructor() {
   this.abpApplicationConfigurationService.get({ includeLocalizationResources: false }).subscribe(config => {
     this.config.setState(config);
   })

docs/en/framework/ui/angular/confirmation-service.md

@@ -4,7 +4,7 @@ You can use the `ConfirmationService` in @abp/ng.theme.shared package to display
 
 ## Getting Started
 
-You do not have to provide the `ConfirmationService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
+You do not have to provide the `ConfirmationService` at component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
 
 ```js
 import { ConfirmationService } from '@abp/ng.theme.shared';
@@ -129,24 +129,25 @@ this.confirmation.clear();
 
 ### How to Change Icons of The Confirmation Popup
 
-You can change icons with the `withConfirmationIcon()` method of `provideAbpThemeShared` function in the app.module.ts. The changes will affect all confirmation popup in the project.
+You can change icons with the `withConfirmationIcon()` method inside `provideAbpThemeShared` function in the app.config.ts. The changes will affect all confirmation popup in the project.
 
 ```ts
 import { provideAbpThemeShared, withConfirmationIcon } from '@abp/ng.theme.shared';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
-    provideAbpThemeShared(withConfirmationIcon({
-      info: 'fa fa-info-circle',
-      success: 'fa fa-check-circle',
-      warning: 'fa fa-exclamation-triangle',
-      error: 'fa fa-times-circle',
-      default: 'fa fa-question-circle',
-    })),
+    provideAbpThemeShared(
+      withConfirmationIcon({
+        info: 'fa fa-info-circle',
+        success: 'fa fa-check-circle',
+        warning: 'fa fa-exclamation-triangle',
+        error: 'fa fa-times-circle',
+        default: 'fa fa-question-circle',
+      })
+    ),
   ],
-})
-export class AppModule {}
+};
 ```
 
 ## API

docs/en/framework/ui/angular/data-table-column-extensions.md

@@ -14,7 +14,7 @@ In this example, we will add a "Name" column and display the value of the `name`
 
 ### Step 1. Create Entity Prop Contributors
 
-The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root module:
+The following code prepares a constant named `identityEntityPropContributors`, ready to be imported and used in your root application configuration:
 
 ```js
 // src/app/entity-prop-contributors.ts
@@ -52,22 +52,22 @@ The list of props, conveniently named as `propList`, is a **doubly linked list**
 
 ### Step 2. Import and Use Entity Prop Contributors
 
-Import `identityEntityPropContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below:
+Import `identityEntityPropContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below:
 
 ```js
-// src/app/app-routing.module.ts
+// src/app/app.routes.ts
 
 // other imports
 import { identityEntityPropContributors } from './entity-prop-contributors';
 
-const routes: Routes = [
+export const APP_ROUTES: Routes = [
   // other routes
 
   {
     path: 'identity',
     loadChildren: () =>
-      import('@abp/ng.identity').then(m =>
-        m.IdentityModule.forLazy({
+      import('@abp/ng.identity').then(c =>
+        c.createRoutes({
           entityPropContributors: identityEntityPropContributors,
         })
       ),
@@ -77,7 +77,7 @@ const routes: Routes = [
 ];
 ```
 
-That is it, `nameProp` entity prop will be added, and you will see the "Name" column next to the usernames on the grid in the users page (`UsersComponent`) of the `IdentityModule`.
+That is it, `nameProp` entity prop will be added, and you will see the "Name" column next to the usernames on the grid in the users page (`UsersComponent`) of the `identity` package.
 
 ## How to Render Custom HTML in Cells
 
@@ -318,7 +318,7 @@ export function reorderUserContributors(
 
 ### EntityPropContributorCallback\<R = any\>
 
-`EntityPropContributorCallback` is the type that you can pass as entity prop contributor callbacks to static `forLazy` methods of the modules.
+`EntityPropContributorCallback` is the type that you can pass as entity prop contributor callbacks to static `createRoutes` methods of the packages.
 
 ```js
 export function isLockedOutPropContributor(

docs/en/framework/ui/angular/dynamic-form-extensions.md

@@ -15,7 +15,7 @@ In this example, we will add a "Date of Birth" field in the user management page
 
 ### Step 1. Create Form Prop Contributors
 
-The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root module:
+The following code prepares two constants named `identityCreateFormPropContributors` and `identityEditFormPropContributors`, ready to be imported and used in your root application configuration:
 
 ```js
 // src/app/form-prop-contributors.ts
@@ -57,10 +57,10 @@ The list of props, conveniently named as `propList`, is a **doubly linked list**
 
 ### Step 2. Import and Use Form Prop Contributors
 
-Import `identityCreateFormPropContributors` and `identityEditFormPropContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below:
+Import `identityCreateFormPropContributors` and `identityEditFormPropContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below:
 
 ```js
-// src/app/app-routing.module.ts
+// src/app/app.routes.ts
 
 // other imports
 import {
@@ -68,14 +68,14 @@ import {
   identityEditFormPropContributors,
 } from './form-prop-contributors';
 
-const routes: Routes = [
+export const APP_ROUTES: Routes = [
   // other routes
 
   {
     path: 'identity',
     loadChildren: () =>
-      import('@abp/ng.identity').then(m =>
-        m.IdentityModule.forLazy({
+      import('@abp/ng.identity').then(c =>
+        c.createRoutes({
           createFormPropContributors: identityCreateFormPropContributors,
           editFormPropContributors: identityEditFormPropContributors,
         })
@@ -86,7 +86,7 @@ const routes: Routes = [
 ];
 ```
 
-That is it, `birthdayProp` form prop will be added, and you will see the datepicker for the "Date of Birth" field right before the "Email address" in the forms of the users page in the `IdentityModule`.
+That is it, `birthdayProp` form prop will be added, and you will see the datepicker for the "Date of Birth" field right before the "Email address" in the forms of the users page in the `identity` package.
 
 ## Object Extensions
 
@@ -309,7 +309,7 @@ export function reorderUserContributors(
 
 ### CreateFormPropContributorCallback\<R = any\>
 
-`CreateFormPropContributorCallback` is the type that you can pass as **create form** prop contributor callbacks to static `forLazy` methods of the modules.
+`CreateFormPropContributorCallback` is the type that you can pass as **create form** prop contributor callbacks to static `createRoutes` methods of the packages.
 
 ```js
 export function myPropCreateContributor(
@@ -326,7 +326,7 @@ export const identityCreateFormPropContributors = {
 
 ### EditFormPropContributorCallback\<R = any\>
 
-`EditFormPropContributorCallback` is the type that you can pass as **edit form** prop contributor callbacks to static `forLazy` methods of the modules.
+`EditFormPropContributorCallback` is the type that you can pass as **edit form** prop contributor callbacks to static `createRoutes` methods of the packages.
 
 ```js
 export function myPropEditContributor(

docs/en/framework/ui/angular/ellipsis-directive.md

@@ -5,47 +5,26 @@ Text inside an HTML element can be truncated easily with an ellipsis by using CS
 
 ## Getting Started
 
-In order to use the `EllipsisDirective` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this:
+In order to use the `EllipsisDirective` in an HTML template, it should be imported in your component. The selector of directive is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element.
 
 ```js
 // ...
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { EllipsisDirective } from '@abp/ng.theme.shared';
 
-@NgModule({
+@Component({
   //...
-  imports: [..., ThemeSharedModule],
+  imports: [EllipsisDirective],
+  template: `
+    <p abpEllipsis>
+      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
+      corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
+      cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
+      impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
+      architecto.
+    </p>
+  `
 })
-export class MyFeatureModule {}
-```
-
-or **if you would not like to import** the `ThemeSharedModule`, you can import the **`EllipsisModule`** as shown below:
-
-
-```js
-// ...
-import { EllipsisModule } from '@abp/ng.theme.shared';
-
-@NgModule({
-  //...
-  imports: [..., EllipsisModule],
-})
-export class MyFeatureModule {}
-```
-
-## Usage
-
-The `EllipsisDirective` is very easy to use. The directive's selector is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element.
-
-See an example usage:
-
-```html
-<p abpEllipsis>
-    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laboriosam commodi quae aspernatur,
-    corporis velit et suscipit id consequuntur amet minima expedita cum reiciendis dolorum
-    cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
-    impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
-    architecto.
-  </p>
+export class SampleComponent {}
 ```
 
 The `abpEllipsis` attribute has been added to the `<p>` element that containing very long text inside to activate the `EllipsisDirective`.

docs/en/framework/ui/angular/entity-action-extensions.md

@@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and alert the current row's `u
 
 ### Step 1. Create Entity Action Contributors
 
-The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root module:
+The following code prepares a constant named `identityEntityActionContributors`, ready to be imported and used in your root application configuration:
 
 ```ts
 // src/app/entity-action-contributors.ts
@@ -49,22 +49,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li
 
 ### Step 2. Import and Use Entity Action Contributors
 
-Import `identityEntityActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below:
+Import `identityEntityActionContributors` in your routing configuration and pass it to the static `configureRoutes` method for `identity` routes as seen below:
 
 ```js
-// src/app/app-routing.module.ts
+// src/app/app.routes.ts
 
 // other imports
 import { identityEntityActionContributors } from './entity-action-contributors';
 
-const routes: Routes = [
+export const APP_ROUTES: Routes = [
   // other routes
 
   {
     path: 'identity',
     loadChildren: () =>
-      import('@abp/ng.identity').then(m =>
-        m.IdentityModule.forLazy({
+      import('@abp/ng.identity').then(c =>
+        c.createRoutes({
           entityActionContributors: identityEntityActionContributors,
         })
       ),
@@ -74,11 +74,11 @@ const routes: Routes = [
 ];
 ```
 
-That is it, `alertUserName` entity action will be added as the last action on the grid dropdown in the "Users" page (`UsersComponent`) of the `IdentityModule`.
+That is it, `alertUserName` entity action will be added as the last action on the grid dropdown in the "Users" page (`UsersComponent`) of the `identity` package.
 
 ## How to Place a Custom Modal and Trigger It by Entity Actions
 
-Let's employ dependency injection to extend the functionality of `IdentityModule` and add a quick view action for the User entity. We will take a lazy-loaded approach.
+Let's employ dependency injection to extend the functionality of `identity` package and add a quick view action for the User entity. We will take a lazy-loaded approach.
 
 <img alt="Entity Action Extension Example: Custom Modal" src="./images/entity-action-extensions---custom-modal.gif" width="800px" style="max-width:100%">
 
@@ -117,16 +117,27 @@ Let's employ dependency injection to extend the functionality of `IdentityModule
   };
   ```
 
-3. Create a parent component to the identity module.
+3. Create a parent component to the identity package.
   ```js
   // src/app/identity-extended/identity-extended.component.ts
 
-  import { IdentityUserDto } from '@abp/ng.identity';
+  import { LocalizationPipe } from '@abp/ng.core';
+  import { IdentityUserDto } from '@abp/ng.identity/proxy';
+  import { ModalCloseDirective, ModalComponent } from '@abp/ng.theme.shared';
+  import { CommonModule } from '@angular/common';
   import { Component } from '@angular/core';
+  import { RouterOutlet } from '@angular/router';
 
   @Component({
     selector: 'app-identity-extended',
     templateUrl: './identity-extended.component.html',
+    imports: [
+      CommonModule, 
+      ModalComponent, 
+      RouterOutlet, 
+      LocalizationPipe, 
+      ModalCloseDirective
+    ]
   })
   export class IdentityExtendedComponent {
     isUserQuickViewVisible: boolean;
@@ -184,55 +195,47 @@ Let's employ dependency injection to extend the functionality of `IdentityModule
   </abp-modal>
   ```
 
-5. Add a module for the component and load `IdentityModule` as seen below:
+5. Add a routing configuration for the component as seen below:
   ```js
-  // src/app/identity-extended/identity-extended.module.ts
+  //  src/app/identity-extended/identity-extended.routes.ts
 
-  import { CoreModule } from '@abp/ng.core';
-  import { IdentityModule } from '@abp/ng.identity';
-  import { ThemeSharedModule } from '@abp/ng.theme.shared';
-  import { NgModule } from '@angular/core';
-  import { RouterModule } from '@angular/router';
-  import { identityEntityActionContributors } from './entity-action-contributors';
+  import { Routes } from '@angular/router';
   import { IdentityExtendedComponent } from './identity-extended.component';
+  import { identityEntityActionContributors } from './entity-action-contributors';
 
-  @NgModule({
-    imports: [
-      CoreModule,
-      ThemeSharedModule,
-      RouterModule.forChild([
+  export const createExtendedIdentityRoutes = (): Routes => [
+    {
+      path: '',
+      component: IdentityExtendedComponent,
+      children: [
         {
           path: '',
-          component: IdentityExtendedComponent,
-          children: [
-            {
-              path: '',
-              loadChildren: () =>
-                IdentityModule.forLazy({
-                  entityActionContributors: identityEntityActionContributors,
-                }),
-            },
-          ],
+          loadChildren: () =>
+            import('@abp/ng.identity').then(c =>
+              c.createRoutes({
+                entityActionContributors: identityEntityActionContributors,
+              }),
+            ),
         },
-      ]),
-    ],
-    declarations: [IdentityExtendedComponent],
-  })
-  export class IdentityExtendedModule {}
+      ],
+    },
+  ];
   ```
 
-6. Load `IdentityExtendedModule` instead of `IdentityModule` in your root routing module.
+6. Use `createExtendedIdentityRoutes` instead of the `createRoutes` function in your root routing configuration.
+Since the routes are already lazily loaded in the `createExtendedIdentityRoutes` function, you can directly use its children array to avoid an unnecessary additional lazy-loading call.
+
   ```js
-  // src/app/app-routing.module.ts
+  // src/app/app.routes.ts
 
-  const routes: Routes = [
+  export const APP_ROUTES: Routes = [
     // other routes
 
     {
       path: 'identity',
-      loadChildren: () =>
-        import('./identity-extended/identity-extended.module')
-          .then(m => m.IdentityExtendedModule),
+      children: [
+        ...createExtendedIdentityRoutes()
+      ],
     },
 
     // other routes
@@ -387,7 +390,7 @@ export function reorderUserContributors(
 
 ### EntityActionContributorCallback\<R = any\>
 
-`EntityActionContributorCallback` is the type that you can pass as entity action contributor callbacks to static `forLazy` methods of the modules.
+`EntityActionContributorCallback` is the type that you can pass as entity action contributor callbacks to static `createRoutes` methods of the packages.
 
 ```js
 // lockUserContributor should have EntityActionContributorCallback<IdentityUserDto> type

docs/en/framework/ui/angular/entity-filters.md

@@ -5,27 +5,9 @@ Every CRUD page includes some sort of inputs to filter the listed data. Some of
 ## Setup
 
 The components are in the _@volo/abp.commercial.ng.ui_ package, which is included in the ABP templates. So, as long as your project is a product of these templates and unless you delete the package, you have access to the entity filter components.
-You can either import the `CommercialUiModule` which contains other components as well as `AdvancedEntityFilters` or you can directly import the `AdvancedEntityFiltersModule` if you do not need other components. Here is how you import them in your Angular module:
-
-```javascript
-import {
-  CommercialUiModule,
-  AdvancedEntityFiltersModule,
-} from "@volo/abp.commercial.ng.ui";
-
-@NgModule({
-  imports: [
-    // other imports
-    CommercialUiModule,
-
-    // OR
-
-    AdvancedEntityFiltersModule,
-  ],
-  // rest of the module metadata
-})
-export class YourModule {}
-```
+
+Advanced entity filters are composed of several components: `AdvancedEntityFiltersComponent`, `AdvancedEntityFiltersToggleComponent`, `AdvancedEntityFiltersFormComponent`, and `AdvancedEntityFiltersAboveSearchComponent`. You can use these components directly by importing them into your standalone components.
+
 
 ## Usage
 
@@ -33,7 +15,7 @@ Let's take a look at the `Users` page from the `Identity` module.
 
 ![ABP Angular UI Users Page with Advanced Entity Filters](./images/angular-advanced-entity-filters.png)
 
-As shown in the screenshot, `abp-advanced-entity-filters` usually contain two parts, an entity filter (common among entities), i.e. `abp-entity-filter`, and entity-specific filters which are encapsulated within the `abp-advanced-entity-filters-form` component.
+As shown in the screenshot, `abp-advanced-entity-filters` usually contain two parts, an entity filter (common among entities), i.e. `abp-entity-filter`, and entity-specific filters which are encapsulated within the `abp-advanced-entity-filters-form` component. You will need to add `AdvancedEntityFiltersComponent` and `AdvancedEntityFiltersFormComponent` to your components' imports array to be able to use them.
 
 `users.component.html`
 
@@ -72,7 +54,7 @@ As shown in the screenshot, `abp-advanced-entity-filters` usually contain two pa
 </abp-advanced-entity-filters>
 ```
 
-The `abp-advanced-entity-filters` already contains the `abp-entity-filter` component so you do not need to pass it. However, the `abp-entity-filter` component needs an instance of `ListService` which is usually stored in the `list` field of the page. You can also change the placeholder of the component via `entityFilterPlaceholder` input which is passed into the `abpLocalization` pipe so that it uses the translated text. Default is `'AbpUi::PagerSearch'`
+The `abp-advanced-entity-filters` already contains the `abp-entity-filter` component so you do not need to pass it. However, the `abp-entity-filter` component needs an instance of `ListService` which is usually stored in the `list` field of the page. You can also change the placeholder of the component via `entityFilterPlaceholder` input which is passed into the `abpLocalization` pipe so that it uses the translated text. The default is `'AbpUi::PagerSearch'`
 
 E.g
 
@@ -100,8 +82,7 @@ E.g.
 Let's remove `form` from the `Users` page
 
 ```html
-<abp-advanced-entity-filters [list]="list" localizationSourceName="AbpIdentity">
-</abp-advanced-entity-filters>
+<abp-advanced-entity-filters [list]="list" localizationSourceName="AbpIdentity" />
 ```
 
 ![ABP Angular UI Users Page with Advanced Entity Filters without form](./images/angular-advanced-entity-filters-without-form.png)
@@ -122,7 +103,7 @@ E.g.
 
 ![ABP Angular UI Users Page with Advanced Entity Filters with form](./images/angular-advanced-entity-filters-with-form.png)
 
-Last but not least, if you need to render some content above the `abp-entity-filter` component, you can use the `abp-advanced-entity-filters-above-search`.
+Last but not least, if you need to render some content above the `abp-entity-filter` component, you can use the `abp-advanced-entity-filters-above-search`. This time, you will need to add `AdvancedEntityFiltersComponent`, `AdvancedEntityFiltersFormComponent`, and `AdvancedEntityFiltersAboveSearchComponent` to the imports' array of your component.
 
 E.g.
 

docs/en/framework/ui/angular/environment.md

@@ -101,22 +101,28 @@ export interface RemoteEnv {
 - `method`: HTTP method to be used when retrieving environment config. Default: `GET`
 - `headers`: If extra headers are needed for the request, it can be set through this field.
 
-## Provide Environment Variable to Core Module
+## Configure Core Provider with Environment
 
 `environment` variable comes from angular host application.
 
 ```js
 import { environment } from '../environments/environment';
 
-@NgModule({
-  imports: [
-    //...other imports
-    CoreModule.forRoot({
-      environment
-    }),
-  ]
-})
+export const appConfig: ApplicationConfig = {
+  providers: [
+    ...
+    provideAbpCore(
+      withOptions({
+        environment,
+        ...
+      })
+    ),
+    ...
+  ],
+};
+
 ```
+
 ## EnvironmentService
 
 ` EnvironmentService` is a singleton service, i.e. provided in root level of your application, and keeps the environment in the internal store.
@@ -132,7 +138,7 @@ import { EnvironmentService } from '@abp/ng.core';
   /* class metadata here */
 })
 class DemoComponent {
-  constructor(private environment: EnvironmentService) {}
+  private environment = inject(EnvironmentService);
 }
 ```
 

docs/en/framework/ui/angular/extensions-overall.md

@@ -21,8 +21,8 @@ Using [ngx-datatable](https://github.com/swimlane/ngx-datatable) in extensible t
          [actionsColumnWidth]="38"
          [actionsTemplate]="customAction"
          [list]="list"
-         (tableActivate)="onTableSelect($event)" > 
-      </abp-extensible-table>
+         (tableActivate)="onTableSelect($event)" 
+      /> 
 ````
 
  * `       actionsText : ` ** Column name of action column. **Type** : string

docs/en/framework/ui/angular/feature-libraries.md

@@ -4,10 +4,10 @@ ABP has an ever-growing number of feature modules and [introducing a new one](..
 
 ## Feature Library Content
 
-Each library has at least two modules:
+Each library has at least two key elements:
 
-1. The main module contains all components, services, types, enums, etc. to deliver the required UI when the feature is loaded. From here on, we will refer to these modules as **"feature module"**.
-2. There is also a **"config module"** per library which helps us configure applications to run these modules or make them accessible.
+1. A **feature definition** that encapsulates all components, services, types, enums, and routing logic needed to deliver the UI for a given feature. With standalone structure, this is often expressed through a `routes.ts` file and associated components, and we will refer to this as the **"feature structure"**.
+2. A **configuration provider** that exposes setup logic, such as `provideMyProjectNameConfig()` functions or environment, specific tokens—allowing the feature to be initialized or integrated differently across applications. We will refer to this as the **configuration structure**.
 
 ## How to Add a Feature Library to Your Project
 
@@ -37,55 +37,46 @@ yarn add @abp/ng.identity
 
 > Identity is used just as an example. If you have initiated your project with ABP CLI or ABP Suite, the identity library will already be installed and configured in your project.
 
-### 2. Import the Config Module
+### 2. Import the Configuration Provider
 
-As of ABP v3.0, every lazy-loaded module has a config module available via a secondary entry point on the same package. Importing them in your root module looks like this:
+As of ABP v9.3, every lazy-loaded route has a config provider available via a secondary entry point on the same package. Importing them in your root configuration looks like this:
 
 ```ts
 import { provideIdentityConfig } from "@abp/ng.identity/config";
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-    // other imports
+    // other providers
     provideIdentityConfig(),
   ],
-  // providers, declarations, and bootstrap
-})
-export class AppModule {}
+};
 ```
 
-We need the config modules for actions required before feature modules are loaded (lazily). For example, the above import configures the menu to display links to identity pages.
+We need the config providers for actions required before feature structure is loaded (lazily). For example, the above import configures the menu to display links to identity pages.
 
-Furthermore, depending on the library, the `.forRoot` static method may receive some options that configure how the feature works.
+Furthermore, depending on the library, the `.createRoutes` static method may receive some options that configure how the feature works.
 
-### 3. Import the Feature Module
+### 3. Import the Feature Definition
 
-Finally, the feature module should be [loaded lazily via Angular router](https://angular.io/guide/lazy-loading-ngmodules). If you open the `/src/app/app-routing.module.ts` file, you should see `IdentityModule` is loaded exactly as follows:
+Finally, the feature structure should be [loaded lazily via Angular router](https://angular.dev/reference/migrations/route-lazy-loading). In a standalone setup, routing is typically defined in a `app.routes.ts` file, and feature modules are replaced with route-level feature definitions. You should see the identity routes configured like this:
 
 ```js
-import { NgModule } from "@angular/core";
-import { RouterModule, Routes } from "@angular/router";
+import { Routes } from "@angular/router";
 
-const routes: Routes = [
+const APP_ROUTES: Routes = [
   // other routes
   {
     path: "identity",
     loadChildren: () =>
-      import("@abp/ng.identity").then((m) => m.IdentityModule.forLazy()),
+      import("@abp/ng.identity").then((m) => m.createRoutes()),
   },
   // other routes
 ];
-
-@NgModule({
-  imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule],
-})
-export class AppRoutingModule {}
 ```
 
 When you load the identity feature like this, the "Users" page, for example, will have a route path of `/identity/users`. <sup id="a-modify-route">[1](#f-modify-route)</sup>
 
-Depending on the library, the `.forLazy` static method may also receive some options that configure how the feature works.
+Depending on the library, the `.createRoutes` static method may also receive some options that configure how the feature works.
 
 ---
 

docs/en/framework/ui/angular/form-validation.md

@@ -6,31 +6,31 @@ Reactive forms in ABP Angular UI are validated by [ngx-validate](https://www.npm
 
 ## How to Add New Error Messages
 
-You can add a new error message by passing validation options to the `withValidationBluePrint` method of `provideAbpThemeShared` function in your root module.
+You can add a new error message by passing validation options to the `withValidationBluePrint` method inside `provideAbpThemeShared` function in your root application configuration.
 
 ```ts
 import { provideAbpThemeShared, withValidationBluePrint } from '@abp/ng.theme.shared';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
+    // ...
     provideAbpThemeShared(
       withValidationBluePrint({
         uniqueUsername: "::AlreadyExists[{%{{{ username }}}%}]"
       })
     ),
-    ...
+    // ...
   ],
-})
-export class AppModule {}
+};
 ```
 
-Alternatively, you may provide the `VALIDATION_BLUEPRINTS` token directly in your root module. Please do not forget to spread `DEFAULT_VALIDATION_BLUEPRINTS`. Otherwise, built-in ABP validation messages will not work.
+Alternatively, you may provide the `VALIDATION_BLUEPRINTS` token directly in your root configuration. Please do not forget to spread `DEFAULT_VALIDATION_BLUEPRINTS`. Otherwise, built-in ABP validation messages will not work.
 
 ```js
 import { VALIDATION_BLUEPRINTS } from "@ngx-validate/core";
 import { DEFAULT_VALIDATION_BLUEPRINTS } from "@abp/ng.theme.shared";
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     {
       provide: VALIDATION_BLUEPRINTS,
@@ -42,10 +42,7 @@ import { DEFAULT_VALIDATION_BLUEPRINTS } from "@abp/ng.theme.shared";
 
     // other providers
   ],
-
-  // rest of the module metadata
-})
-export class AppModule {}
+};
 ```
 
 When a [validator](https://angular.io/guide/form-validation#defining-custom-validators) or an [async validator](https://angular.io/guide/form-validation#creating-asynchronous-validators) returns an error with the key given to the error blueprints (`uniqueUsername` here), the validation library will be able to display an error message after localizing according to the given key and interpolation params. The result will look like this:
@@ -61,7 +58,7 @@ In this example;
 
 ## How to Change Existing Error Messages
 
-You can overwrite an existing error message by passing validation options to the `ThemeSharedModule` in your root module. Let's imagine you have a custom localization resource for required inputs.
+You can overwrite an existing error message by passing validation options to the `provideAbpThemeShared` in your root application configuration. Let's imagine you have a custom localization resource for required inputs.
 
 ```json
 "RequiredInput": "Oops! We need this input."
@@ -72,24 +69,26 @@ To use this instead of the built-in required input message, all you need to do i
 ```ts
 import { provideAbpThemeShared, withValidationBluePrint } from '@abp/ng.theme.shared';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-    provideAbpThemeShared(withValidationBluePrint({
-      required: "::RequiredInput",
-    })),
-    ...
+     // ...
+    provideAbpThemeShared(
+      withValidationBluePrint({
+        required: "::RequiredInput",
+      })
+    ),
+    // ...
   ],
-})
-export class AppModule {}
+};
 ```
 
-Alternatively, you may provide the `VALIDATION_BLUEPRINTS` token directly in your root module. Please do not forget to spread `DEFAULT_VALIDATION_BLUEPRINTS`. Otherwise, built-in ABP validation messages will not work.
+Alternatively, you may provide the `VALIDATION_BLUEPRINTS` token directly in your root app configuration. Please do not forget to spread `DEFAULT_VALIDATION_BLUEPRINTS`. Otherwise, built-in ABP validation messages will not work.
 
 ```js
 import { VALIDATION_BLUEPRINTS } from "@ngx-validate/core";
 import { DEFAULT_VALIDATION_BLUEPRINTS } from "@abp/ng.theme.shared";
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     {
       provide: VALIDATION_BLUEPRINTS,
@@ -101,10 +100,7 @@ import { DEFAULT_VALIDATION_BLUEPRINTS } from "@abp/ng.theme.shared";
 
     // other providers
   ],
-
-  // rest of the module metadata
-})
-export class AppModule {}
+};
 ```
 
 The error message will look like this:
@@ -134,11 +130,14 @@ Validation works on any element or component with a `formControl` or `formContro
 First, build a custom error component. Extending the existing `ValidationErrorComponent` would make it easier.
 
 ```js
+import { LocalizationPipe } from "@abp/ng.core";
 import { ValidationErrorComponent } from "@abp/ng.theme.basic";
+import { CommonModule } from "@angular/common";
 import { ChangeDetectionStrategy, Component } from "@angular/core";
 
 @Component({
   selector: "app-validation-error",
+  imports:[CommonModule, LocalizationPipe],
   template: `
     <div
       class="font-weight-bold font-italic px-1 invalid-feedback"
@@ -152,18 +151,12 @@ import { ChangeDetectionStrategy, Component } from "@angular/core";
 export class ErrorComponent extends ValidationErrorComponent {}
 ```
 
-Then, declare and provide it in your root module.
+Then, provide it in your root configuration.
 
 ```js
 import { VALIDATION_ERROR_TEMPLATE } from "@ngx-validate/core";
 
-@NgModule({
-  // rest of the module metadata
-
-  declarations: [
-    // other declarables
-    ErrorComponent,
-  ],
+export const appConfig: ApplicationConfig = {
   providers: [
     // other providers
     {
@@ -171,8 +164,7 @@ import { VALIDATION_ERROR_TEMPLATE } from "@ngx-validate/core";
       useValue: ErrorComponent,
     },
   ],
-})
-export class AppModule {}
+};
 ```
 
 The error message will be bold and italic now:

docs/en/framework/ui/angular/http-error-handling.md

@@ -5,25 +5,25 @@
 ABP offers a configurations for errors handling like below
 
 ```ts
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { MyCustomRouteErrorComponent } from './my-custom-route.component';
+//app.config.ts
+import { provideAbpThemeShared } from '@abp/ng.theme.shared';
+import { CustomErrorComponent } from './custom-error.component';
 
-@NgModule({
-  imports: [
-    ThemeSharedModule.forRoot({
-      httpErrorConfig: {
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideAbpThemeShared(
+      withHttpErrorConfig({
         skipHandledErrorCodes: [403],
         errorScreen: {
-          forWhichErrors: [404],
           component: CustomErrorComponent,
-          hideCloseIcon: false
-        }
-      }
-    }),
-    ...
+          forWhichErrors: [404],
+          hideCloseIcon: false,
+        },
+      }),
+    ),
   ],
-})
-export class AppModule {}
+};
+
 ```
 
 - `ErrorScreenErrorCodes` the error codes that you can pass to `skipHandledErrorCodes` and `forWhichErrors`.
@@ -67,27 +67,24 @@ export function handleHttpErrors(injector: Injector, httpError: HttpErrorRespons
   return of(httpError);
 }
 
-// app.module.ts
+// app.config.ts
 import { Error404Component } from './error404/error404.component';
 import { handleHttpErrors } from './http-error-handling';
 import { HTTP_ERROR_HANDLER, ... } from '@abp/ng.theme.shared';
 
-@NgModule({
-  // ...
+export const appConfig: ApplicationConfig = {
   providers: [
-    // ...
-    { provide: HTTP_ERROR_HANDLER, useValue: handleHttpErrors }
+    ...
+    { provide: HTTP_ERROR_HANDLER, useValue: handleHttpErrors },
+    ...
   ],
-  declarations: [
-   //...
-   Error404Component],
-})
-export class AppModule {}
+};
+
 ```
 
 In the example above:
 
-- Created a function named `handleHttpErrors` and defined as value of the `HTTP_ERROR_HANDLER` provider in app.module. After this, the function executes when an HTTP error occurs.
+- Created a function named `handleHttpErrors` and defined as value of the `HTTP_ERROR_HANDLER` provider in `app.config.ts`. After this, the function executes when an HTTP error occurs.
 - 400 bad request errors is handled. When a 400 error occurs.
 
 - Since `of(httpError)` is returned at bottom of the `handleHttpErrors`, the `ErrorHandler` will handle the HTTP errors except 400 and 404 errors.
@@ -195,22 +192,20 @@ export class MyCustomErrorHandlerService
 
 ```ts
 
-// app.module.ts
+// app.config.ts
 import { CUSTOM_ERROR_HANDLERS, ... } from '@abp/ng.theme.shared';
 import { MyCustomErrorHandlerService } from './custom-error-handler.service';
 
-@NgModule({
-  // ...
+export const appConfig: ApplicationConfig = {
   providers: [
-    // ...
+    //...
     {
       provide: CUSTOM_ERROR_HANDLERS,
       useExisting: MyCustomErrorHandlerService,
       multi: true,
     }
-  ]
-})
-export class AppModule {}
+  ],
+};
 ```
 
 In the example above:

docs/en/framework/ui/angular/list-service.md

@@ -151,7 +151,6 @@ import { Component, inject } from '@angular/core';
 import { BookDto, BooksService } from './books.service';
 
 @Component({
-  standalone: true,
   selector: 'app-books',
   templateUrl: './books.component.html',
   providers: [ListService, BooksService],

docs/en/framework/ui/angular/loading-directive.md

@@ -6,23 +6,24 @@ You may want to block a part of the UI and show a spinner for a while; the `Load
 
 ## Getting Started
 
-In order to use the `LoadingDirective` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this:
+In order to use the `LoadingDirective` in an HTML template, it should be imported into your component like this:
 
 ```js
 // ...
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { LoadingDirective } from '@abp/ng.theme.shared';
 
-@NgModule({
-  //...
-  imports: [..., ThemeSharedModule],
+@Component({
+  // ...
+  imports: [ LoadingDirective ]
+  // ...
 })
-export class MyFeatureModule {}
+export class SampleComponent {}
 ```
 
 
 ## Usage
 
-The `LoadingDirective` is easy to use. The directive's selector is **`abpLoading`**. By adding the `abpLoading` attribute to an HTML element, you can activate the `LoadingDirectiveective` for the HTML element when the value is true.
+The `LoadingDirective` is easy to use. The directive's selector is **`abpLoading`**. By adding the `abpLoading` attribute to an HTML element, you can activate the `LoadingDirective` for the HTML element when the value is true.
 
 See an example usage:
 
@@ -33,7 +34,7 @@ See an example usage:
     cupiditate? Voluptas eaque voluptatum odio deleniti quo vel illum nemo accusamus nulla ratione
     impedit dolorum expedita necessitatibus fugiat ullam beatae, optio eum cupiditate ducimus
     architecto.
-  </div>
+</div>
 ```
 
 

docs/en/framework/ui/angular/localization.md

@@ -9,7 +9,7 @@ The Localization key format consists of 2 sections which are **Resource Name** a
 
 ```js
 const environment = {
-  //...
+  // ...
   localization: {
     defaultResourceName: "MyProjectName",
   },
@@ -49,7 +49,7 @@ Localization data is stored in key-value pairs:
 
 ```js
 {
-  //...
+  // ...
   AbpAccount: { // AbpAccount is the resource name
     Key: "Value",
     PagerInfo: "Showing {0} to {1} of {2} entries"
@@ -121,12 +121,12 @@ See an example:
 ```ts
 import { provideAbpCore, withOptions } from '@abp/ng.core';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
     provideAbpCore(
       withOptions({
-        ...,
+        // ...,
         localizations: [
           {
             culture: 'en',
@@ -155,22 +155,18 @@ import { provideAbpCore, withOptions } from '@abp/ng.core';
         ],
       }),
     ),
-    ...
   ],
-})
-export class AppModule {}
+};
 ```
 
-...or, you can determine the localizations in a feature module:
+...or, you can determine the localizations in a feature provider configuration:
 
 ```ts
-// your feature module
+// your feature configuration
 
-@NgModule({
-  imports: [
-    //...other imports
-    CoreModule.forChild({
-      localizations: [
+export function provideFeatureConfiguration(): EnvironmentProviders{
+  return provideAbpCoreChild({
+    localizations: [
         {
           culture: 'en',
           resources: [
@@ -196,9 +192,8 @@ export class AppModule {}
           ],
         },
       ],
-    }),
-  ]
-})
+  })
+}
 ```
 
 The localizations above can be used like this:
@@ -267,8 +262,8 @@ import { Component } from "@angular/core";
 @Component({
   selector: "app-root",
   template: `
-    <abp-loader-bar></abp-loader-bar>
-    <router-outlet></router-outlet>
+    <abp-loader-bar />
+    <router-outlet />
   `,
 })
 export class AppComponent {}
@@ -276,7 +271,7 @@ export class AppComponent {}
 
 ## Registering a New Locale
 
-Since ABP has more than one language, Angular locale files loads lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and register to Angular core using the [`registerLocaleData`](https://angular.io/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `CoreModule`.
+Since ABP has more than one language, Angular locale files loads lazily using [Webpack's import function](https://webpack.js.org/api/module-methods/#import-1) to avoid increasing the bundle size and register to Angular core using the [`registerLocaleData`](https://angular.io/api/common/registerLocaleData) function. The chunks to be included in the bundle are specified by the [Webpack's magic comments](https://webpack.js.org/api/module-methods/#magic-comments) as hard-coded. Therefore a `registerLocale` function that returns Webpack `import` function must be passed to `provideAbpCore(withOptions({...}))`.
 
 ### registerLocaleFn
 
@@ -286,11 +281,12 @@ Since ABP has more than one language, Angular locale files loads lazily using [W
 import { provideAbpCore, withOptions } from '@abp/ng.core';
 import { registerLocale } from '@abp/ng.core/locale';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
+    // ...
     provideAbpCore(
       withOptions({
-        ...,
+        // ...,
         registerLocaleFn: registerLocale(
           // you can pass the cultureNameLocaleFileMap and errorHandlerFn as optionally
           {
@@ -302,10 +298,9 @@ import { registerLocale } from '@abp/ng.core/locale';
         ),
       }),
     ),
-    ...
+    // ...
   ],
-})
-export class AppModule {}
+};
 ```
 
 ### Mapping of Culture Name to Angular Locale File Name
@@ -317,19 +312,18 @@ Some of the culture names defined in .NET do not match Angular locales. In such
 If you see an error like this, you should pass the `cultureNameLocaleFileMap` property like below to the `registerLocale` function.
 
 ```js
-// app.module.ts
+// app.config.ts
 
 import { registerLocale } from '@abp/ng.core/locale';
 // if you have commercial license and the language management module, add the below import
 // import { registerLocale } from '@volo/abp.ng.language-management/locale';
 
-
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
     provideAbpCore(
       withOptions({
-        ...,
+        // ...,
         registerLocaleFn: registerLocale(
           {
             cultureNameLocaleFileMap: {
@@ -340,18 +334,18 @@ import { registerLocale } from '@abp/ng.core/locale';
         )
       }),
     ),
-  ]
-})
+  ],
+};
 ```
 
 See [all locale files in Angular](https://github.com/angular/angular/tree/master/packages/common/locales).
 
 ### Adding a New Culture
 
-Add the below code to the `app.module.ts` by replacing `your-locale` placeholder with a correct locale name.
+Add the below code to the `app.config.ts` by replacing `your-locale` placeholder with a correct locale name.
 
 ```js
-//app.module.ts
+//app.config.ts
 
 import { storeLocaleData } from "@abp/ng.core/locale";
 import(
@@ -361,7 +355,7 @@ import(
 ).then((m) => storeLocaleData(m.default, "your-locale"));
 ```
 
-...or a custom `registerLocale` function can be passed to the `CoreModule`:
+...or a custom `registerLocale` function can be passed to the abp core provider configuration options:
 
 ```js
 // register-locale.ts
@@ -376,22 +370,22 @@ export function registerLocale(locale: string) {
   )
 }
 
-// app.module.ts
+// app.config.ts
 
 import { registerLocale } from './register-locale';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-    // ...
+     // ...
     provideAbpCore(
       withOptions({
-        ...,
+        // ...,
         registerLocaleFn: registerLocale,
       }),
     ),
     //...
-  ]
-})
+  ],
+};
 ```
 
 After this custom `registerLocale` function, since the en and fr added to the `webpackInclude`, only en and fr locale files will be created as chunks:

docs/en/framework/ui/angular/lookup-components.md

@@ -4,22 +4,7 @@ The Angular UI of ABP Commercial introduces some components with `abp-lookup-...
 
 ## Setup
 
-The components are in the _@volo/abp.commercial.ng.ui_ package, which is included in the ABP templates. So, as long as your project is a product of these templates and unless you delete the package, you have access to the lookup components. Here is how you import them in your Angular module:
-
-```javascript
-import { CommercialUiModule } from '@volo/abp.commercial.ng.ui';
-
-@NgModule({
-  imports: [
-    // other imports
-    CommercialUiModule,
-  ],
-  // rest of the module metadata
-})
-export class YourModule {}
-```
-
-Now you can use the lookup components in your components declared by this module.
+The components are in the _@volo/abp.commercial.ng.ui_ package, which is included in the ABP templates. So, as long as your project is a product of these templates and unless you delete the package, you have access to the lookup components. You can import these in your standalone components in order to be able to use them.
 
 ## Lookup HTTP Requests
 
@@ -48,7 +33,7 @@ Typeahead is a good choice when you have an unknown number of records for the re
 
 ![ABP Angular UI Typeahead Lookup](./images/angular-lookup-typeahead.gif)
 
-Here is how it is used in the template.
+Do not forget to import `LookupTypeaheadComponent` in your component, and here is how it is used in the template.
 
 ```html
 <abp-lookup-typeahead
@@ -57,7 +42,7 @@ Here is how it is used in the template.
   displayNameProp="name"
   [editingData]="selected?.country"
   [getFn]="service.getCountryLookup"
-></abp-lookup-typeahead>
+/>
 ```
 
 The available properties are as follows:
@@ -77,7 +62,7 @@ Select is a good choice when you have a low (and usually fixed) number of record
 
 ![ABP Angular UI Select Lookup](./images/angular-lookup-select.gif)
 
-Here is how it is used in the template.
+Do not forget to import `LookupSelectComponent` in your component, and here is how it is used in the template.
 
 ```html
 <abp-lookup-select
@@ -85,7 +70,7 @@ Here is how it is used in the template.
   formControlName="countryId"
   displayNameProp="name"
   [getFn]="service.getCountryLookup"
-></abp-lookup-select>
+/>
 ```
 
 The available properties are as follows:

docs/en/framework/ui/angular/manage-profile-page-tabs.md

@@ -9,7 +9,7 @@ See the example below, covers all features:
 ```ts
 // manage-profile-tabs.provider.ts
 
-import { APP_INITIALIZER, Component } from "@angular/core";
+import { provideAppInitializer, Component } from "@angular/core";
 import { TwoFactorTabComponent } from "@volo/abp.ng.account/public";
 import {
   eAccountManageProfileTabNames,
@@ -18,48 +18,47 @@ import {
 import { MyAwesomeTabComponent } from "./my-awesome-tab/my-awesome-tab.component";
 
 @Component({
-  standalone: true,
   selector: "abp-my-awesome-tab",
   template: `My Awesome Tab`,
 })
 class MyAwesomeTabComponent {}
 
 export const MANAGE_PROFILE_TAB_PROVIDER = {
-  provide: APP_INITIALIZER,
-  useFactory: configureManageProfileTabs,
-  deps: [ManageProfileTabsService],
-  multi: true,
+  provideAppInitializer(()=>{
+    configureManageProfileTabs();
+  }),
 };
 
-export function configureManageProfileTabs(tabs: ManageProfileTabsService) {
-  return () => {
-    tabs.add([
-      {
-        name: "::MyAwesomeTab", // supports localization keys
-        order: 5,
-        component: MyAwesomeTabComponent,
-      },
-    ]);
-
-    tabs.patch(eAccountManageProfileTabNames.TwoFactor, {
-      name: "Two factor authentication",
-      component: TwoFactorTabComponent,
-    });
-
-    tabs.remove([eAccountManageProfileTabNames.ProfilePicture]);
-  };
+export function configureManageProfileTabs() {
+  tabs = inject(ManageProfileTabsService);
+  tabs.add([
+    {
+      name: "::MyAwesomeTab", // supports localization keys
+      order: 5,
+      component: MyAwesomeTabComponent,
+    },
+  ]);
+
+  tabs.patch(eAccountManageProfileTabNames.TwoFactor, {
+    name: "Two factor authentication",
+    component: TwoFactorTabComponent,
+  });
+
+  tabs.remove([eAccountManageProfileTabNames.ProfilePicture]);
 }
 ```
 
 ```ts
-//app.module.ts
+//app.config.ts
 
 import { MANAGE_PROFILE_TAB_PROVIDER } from "./manage-profile-tabs.provider";
 
-@NgModule({
-  providers: [MANAGE_PROFILE_TAB_PROVIDER],
-})
-export class AppModule {}
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    MANAGE_PROFILE_TAB_PROVIDER
+  ],
+};
 ```
 
 What we have done above;
@@ -70,7 +69,7 @@ What we have done above;
   - Renamed the "Two factor" tab label.
   - Removed the "Profile picture" tab.
 - Determined the `MANAGE_PROFILE_TAB_PROVIDER` to be able to run the `configureManageProfileTabs` function on initialization.
-- Registered the `MANAGE_PROFILE_TAB_PROVIDER` to the `AppModule` providers.
+- Registered the `MANAGE_PROFILE_TAB_PROVIDER` to the `appConfig` providers.
 
 See the result:
 

docs/en/framework/ui/angular/modal.md

@@ -15,27 +15,33 @@ The `abp-modal` provides some additional benefits:
 
 ## Getting Started
 
-In order to use the `abp-modal` in an HTML template, the **`ThemeSharedModule`** should be imported into your module like this:
+In order to use the `abp-modal` in an HTML template, the **`ModalComponent`** should be imported into your component like this:
 
 ```js
+// sample.component.ts
 // ...
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { ModalComponent, ModalCloseDirective } from '@abp/ng.theme.shared';
 
-@NgModule({
+@Component({
   //...
-  imports: [..., ThemeSharedModule],
+  ,
+  imports: [
+    // ..., 
+    ModalComponent,
+    ModalCloseDirective // if you use `abpClose` directive in the html template
+  ],
 })
-export class MyFeatureModule {}
+export class SampleComponent {
+  isModalOpen = false;
+}
 ```
 
-## Usage
-
-You can add the `abp-modal` to your component very quickly. See an example:
-
 ```html
 <!-- sample.component.html -->
 
-<button class="btn btn-primary" (click)="isModalOpen = true">Open modal</button>
+<button class="btn btn-primary" (click)="isModalOpen = true">
+  Open modal
+</button>
 
 <abp-modal [(visible)]="isModalOpen">
   <ng-template #abpHeader>
@@ -43,24 +49,17 @@ You can add the `abp-modal` to your component very quickly. See an example:
   </ng-template>
 
   <ng-template #abpBody>
-  <p>Modal content</p>
+    <p>Modal content</p>
   </ng-template>
 
   <ng-template #abpFooter>
-    <button type="button" class="btn btn-secondary" abpClose>Close</button>
+    <button type="button" class="btn btn-secondary" abpClose>
+      Close
+    </button>
   </ng-template>
 </abp-modal>
 ```
 
-```js
-// sample.component.ts
-
-@Component(/* component metadata */)
-export class SampleComponent {
-    isModalOpen = false
-}
-```
-
 ![Example modal result](./images/modal-result-1.jpg)
 
 
@@ -136,7 +135,10 @@ import { FormBuilder, Validators } from '@angular/forms';
 
 @Component(/* component metadata */)
 export class BookComponent {
- form = this.fb.group({
+  private fb = inject(FormBuilder);
+  private service = inject(BookService);
+ 
+  form = this.fb.group({
     author: [null, [Validators.required]],
     name: [null, [Validators.required]],
     price: [null, [Validators.required, Validators.min(0)]],
@@ -148,10 +150,10 @@ export class BookComponent {
 
   isModalOpen: boolean;
 
-  constructor(private fb: FormBuilder, private service: BookService) {}
-
   save() {
-    if (this.form.invalid) return;
+    if (this.form.invalid) {
+      return;
+    }
 
     this.inProgress = true;
 
@@ -257,19 +259,16 @@ export class NgbdModalOptions {
 **`suppressUnsavedChangesWarning`** is a boolean input that determines whether the confirmation popup triggering active or not. It can also be set globally as shown below:
 
 ```ts
-//app.module.ts
-
-// app.module.ts
+// app.config.ts
 
 import { SUPPRESS_UNSAVED_CHANGES_WARNING } from '@abp/ng.theme.shared';
 
-// ...
-
-@NgModule({
-  // ...
-  providers: [{provide: SUPPRESS_UNSAVED_CHANGES_WARNING, useValue: true}]
-})
-export class AppModule {}
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    { provide: SUPPRESS_UNSAVED_CHANGES_WARNING, useValue: true }
+  ],
+};
 ```
 
 Note: The `suppressUnsavedChangesWarning` input of `abp-modal` value overrides the `SUPPRESS_UNSAVED_CHANGES_WARNING` injection token value.

docs/en/framework/ui/angular/modifying-the-menu.md

@@ -59,32 +59,33 @@ An alternative and probably cleaner way is to use a route provider. First create
 ```js
 // route.provider.ts
 import { RoutesService, eLayoutType } from '@abp/ng.core';
-import { APP_INITIALIZER } from '@angular/core';
+import { provideAppInitializer } from '@angular/core';
 
 export const APP_ROUTE_PROVIDER = [
-  { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+  provideAppInitializer(() => {
+    configureRoutes();
+  }),
 ];
 
-function configureRoutes(routes: RoutesService) {
-  return () => {
-    routes.add([
-      {
-        path: '/your-path',
-        name: 'Your navigation',
-        requiredPolicy: 'permission key here',
-        order: 101,
-        iconClass: 'fas fa-question-circle',
-        layout: eLayoutType.application,
-      },
-      {
-        path: '/your-path/child',
-        name: 'Your child navigation',
-        parentName: 'Your navigation',
-        requiredPolicy: 'permission key here',
-        order: 1,
-      },
-    ]);
-  };
+function configureRoutes() {
+  const routesService = inject(RoutesService);
+  routes.add([
+    {
+      path: '/your-path',
+      name: 'Your navigation',
+      requiredPolicy: 'permission key here',
+      order: 101,
+      iconClass: 'fas fa-question-circle',
+      layout: eLayoutType.application,
+    },
+    {
+      path: '/your-path/child',
+      name: 'Your child navigation',
+      parentName: 'Your navigation',
+      requiredPolicy: 'permission key here',
+      order: 1,
+    },
+  ]);
 }
 ```
 
@@ -95,22 +96,21 @@ We can also define a group for navigation elements. It's an optional property
 // route.provider.ts
 import { RoutesService } from '@abp/ng.core';
 
-function configureRoutes(routes: RoutesService) {  
-  return () => {
-    routes.add([
-      {
-        //etc..
-        group: 'ModuleName::GroupName'
-      },
-      {
-        path: '/your-path/child',
-        name: 'Your child navigation',
-        parentName: 'Your navigation',
-        requiredPolicy: 'permission key here',
-        order: 1,
-      },
-    ]);
-  };
+function configureRoutes() {  
+  const routesService = inject(RoutesService);
+  routes.add([
+    {
+      //etc..
+      group: 'ModuleName::GroupName'
+    },
+    {
+      path: '/your-path/child',
+      name: 'Your child navigation',
+      parentName: 'Your navigation',
+      requiredPolicy: 'permission key here',
+      order: 1,
+    },
+  ]);
 }
 ```
 
@@ -131,25 +131,23 @@ export class AppComponent {
 }
 ```
 
-...and then in app.module.ts...
+...and then in app.config.ts...
  - The `groupedVisible` method will return the `Others` group for ungrouped items, the default key is `AbpUi::OthersGroup`, we can change this `key` via the `OTHERS_GROUP` injection token
 
 ```js
-import { NgModule } from '@angular/core';
 import { OTHERS_GROUP } from '@abp/ng.core';
 import { APP_ROUTE_PROVIDER } from './route.provider';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
+    // ...
     APP_ROUTE_PROVIDER,
     {
       provide: OTHERS_GROUP,
       useValue: 'ModuleName::MyOthersGroupKey',
     },
   ],
-  // imports, declarations, and bootstrap
-})
-export class AppModule {}
+};
 ```
 
 ### Singularize Route Item
@@ -182,9 +180,9 @@ Here is what every property works as:
 - `invisible` makes the item invisible in the menu. (default: `false`)
 - `group` is an optional property that is used to group together related routes in an application. (type: `string`, default: `AbpUi::OthersGroup`)
 
-### Via `routes` Property in `AppRoutingModule`
+### Via `routes` Property in `APP_ROUTES`
 
-You can define your routes by adding `routes` as a child property to `data` property of a route configuration in the `app-routing.module`. The `@abp/ng.core` package organizes your routes and stores them in the `RoutesService`.
+You can define your routes by adding `routes` as a child property to `data` property of a route configuration in the `app.routes.ts`. The `@abp/ng.core` package organizes your routes and stores them in the `RoutesService`.
 
 You can add the `routes` property like below:
 

docs/en/framework/ui/angular/multi-tenancy.md

@@ -133,12 +133,9 @@ Example:
 ```ts
 import { TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core';
 
-@NgModule({
-  imports: [
-  // removed for clarity
-  ],
+export const appConfig: ApplicationConfig = {
   providers: [
-    // removed for clarity
+     // removed for clarity
     {
       provide: TENANT_NOT_FOUND_BY_NAME,
       useFactory: function () {
@@ -148,11 +145,7 @@ import { TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core';
       },
     },
   ],
-  declarations: [AppComponent],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
-
+};
 ``` 
 
 ## See Also

docs/en/framework/ui/angular/oauth-module.md

@@ -2,8 +2,7 @@
 
 The authentication functionality has been moved from @abp/ng.core to @abp/ng.ouath since v7.0.
 
-If your app is version 8.3 or higher, you should include "provideAbpOAuth()" in your app.module.ts as an providers after "provideAbpCore()
-".
+If your app is version 8.3 or higher, you should include "provideAbpOAuth()" after "provideAbpCore()" in the `appConfig` array  of your `app.config.ts`.
 
 Those abstractions can be found in the @abp/ng-core packages.
 

docs/en/framework/ui/angular/page-component.md

@@ -14,10 +14,10 @@ Let's look at the following example without `abp-page` component.
     <h1 class="content-header-title">{%{{{ '::Dashboard' | abpLocalization }}}%}</h1>
   </div>
   <div id="breadcrumb" class="col-lg-auto pl-lg-0">
-    <abp-breadcrumb></abp-breadcrumb>
+    <abp-breadcrumb />
   </div>
   <div class="col">
-    <abp-page-toolbar [record]="data"></abp-page-toolbar>
+    <abp-page-toolbar [record]="data" />
   </div>
 </div>
 
@@ -42,22 +42,19 @@ export enum PageParts {
 
 ## Usage
 
-Firstly, you need to import `PageModule` from `@abp/ng.components/page` as follows:
+Firstly, you need to import Page components from `@abp/ng.components/page` based on your usage. Here is an example:
 
-`dashboard.module.ts`
+`dashboard.component.ts`
 
 ```javascript
-import { PageModule } from '@abp/ng.components/page';
-import { DashboardComponent } from './dashboard.component';
 
-@NgModule({
-  declarations: [DashboardComponent],
-  imports: [PageModule]
+@Component({
+  imports: [ PageComponent, ... ]
 })
-export class DashboardModule {}
+export class  DashboardComponent {}
 ```
 
-And change the template of `dashboard.component.ts` to the following:
+And change the template of `dashboard.component.html` to the following:
 
 ```html
 <abp-page [title]="'::Dashboard' | abpLocalization" [toolbar]="data">
@@ -75,35 +72,55 @@ And change the template of `dashboard.component.ts` to the following:
 
 ## Overriding template
 
-If you need to replace the template of any part, you can use the following sub-components. 
+If you need to replace the template of any part, you can use the following sub-components. You will need to import these components and modify the html template accordingly.
 
-```html
-<abp-page>
-  <abp-page-title-container class="col">
-    <h2>Custom Title</h2>
-  </abp-page-title-container>
-
-  <abp-page-breacrumb-container class="col">
-    <my-breadcrumb></my-breadcrumb>
-  </abp-page-breacrumb-container>
-
-  <abp-page-toolbar-container class="col">
-    <button (click)="doSth()">Some Action</button>
-  </abp-page-toolbar-container>
-</abp-page>
+```javascript
+import { 
+  PageComponent, 
+  PageTitleContainerComponent,
+  PageBreadcrumbContainerComponent,
+  PageToolbarContainerComponent
+} from '@abp/ng.components/page';
+
+@Component({
+  selector: 'app-sample-component',
+  template: `
+    <abp-page>
+      <abp-page-title-container class="col">
+        <h2>Custom Title</h2>
+      </abp-page-title-container>
+
+      <abp-page-breacrumb-container class="col">
+        <my-breadcrumb />
+      </abp-page-breacrumb-container>
+
+      <abp-page-toolbar-container class="col">
+        <button (click)="doSth()">Some Action</button>
+      </abp-page-toolbar-container>
+    </abp-page>
+  `
+  imports: [
+    PageComponent, 
+    PageTitleContainerComponent, 
+    PageBreadcrumbContainerComponent, 
+    MyBreadcrumbComponent,
+    PageToolbarContainerComponent
+  ]
+})
+export class SampleCompnent {}
 ```
 
 You do not have to provide them all. You can just use which one you need to replace. These components have priority over the inputs declared above. If you use these components, you can omit the inputs.
 
 ## PagePartDirective
 
-`PageModule` provides a structural directive that is used internally within `PageComponent` and can also be used externally.
+`Components` package provides a structural directive that is used internally within `PageComponent` and can also be used externally.
 
 `PageComponent` employs this directive internally as follows: 
 
 ```html
 <div class="col-lg-auto pl-lg-0" *abpPagePart="pageParts.breadcrumb">
-  <abp-breadcrumb></abp-breadcrumb>
+  <abp-breadcrumb />
 </div>
 ```
 
@@ -111,7 +128,7 @@ It also can take a context input as follows:
 
 ```html
 <div class="col" *abpPagePart="pageParts.toolbar; context: toolbarData">
-  <abp-page-toolbar [record]="toolbarData"></abp-page-toolbar>
+  <abp-page-toolbar [record]="toolbarData" />
 </div>
 ```
 
@@ -194,17 +211,14 @@ export class MyPageRenderStrategy implements PageRenderStrategy {
 })
 export class DashboardComponent {}
 
-@NgModule({
-  imports: [PageModule],
-  declarations: [DashboardComponent],
+export const appConfig: ApplicationConfig = {
   providers: [
     {
       provide: PAGE_RENDER_STRATEGY,
       useClass: MyPageRenderStrategy,
     }
-  ]
-})
-export class DashboardModule {}
+  ],
+};
 ```
 
 ## See Also

docs/en/framework/ui/angular/page-toolbar-extensions.md

@@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and log `userName` of all user
 
 ### Step 1. Create Toolbar Action Contributors
 
-The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module:
+The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration:
 
 ```js
 // src/app/toolbar-action-contributors.ts
@@ -53,22 +53,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li
 
 ### Step 2. Import and Use Toolbar Action Contributors
 
-Import `identityToolbarActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below:
+Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below:
 
 ```js
-// src/app/app-routing.module.ts
+// src/app/app.routes.ts
 
 // other imports
 import { identityToolbarActionContributors } from './toolbar-action-contributors';
 
-const routes: Routes = [
+export const APP_ROUTES: Routes = [
   // other routes
 
   {
     path: 'identity',
     loadChildren: () =>
-      import('@abp/ng.identity').then(m =>
-        m.IdentityModule.forLazy({
+      import('@abp/ng.identity').then(c =>
+        c.createRoutes({
           toolbarActionContributors: identityToolbarActionContributors,
         })
       ),
@@ -78,7 +78,7 @@ const routes: Routes = [
 ];
 ```
 
-That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `IdentityModule`.
+That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `identity` package.
 
 ## How to Add a Custom Component to Page Toolbar
 
@@ -93,9 +93,9 @@ We need to have a component before we can pass it to the toolbar action contribu
 ```js
 // src/app/click-me-button.component.ts
 
+import { Component, Inject } from '@angular/core';
 import { IdentityUserDto } from '@abp/ng.identity/proxy';
 import { ActionData, EXTENSIONS_ACTION_DATA } from '@abp/ng.components/extensible';
-import { Component, Inject } from '@angular/core';
 
 @Component({
   selector: 'app-click-me-button',
@@ -120,7 +120,7 @@ Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolb
 
 ### Step 2. Create Toolbar Action Contributors
 
-The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root module. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in:
+The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in:
 
 ```js
 // src/app/toolbar-action-contributors.ts
@@ -156,22 +156,22 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li
 
 ### Step 3. Import and Use Toolbar Action Contributors
 
-Import `identityToolbarActionContributors` in your routing module and pass it to the static `forLazy` method of `IdentityModule` as seen below.
+Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below.
 
 ```js
-// src/app/app-routing.module.ts
+// src/app/app.routes.ts
 
 // other imports
 import { identityToolbarActionContributors } from './toolbar-action-contributors';
 
-const routes: Routes = [
+export const APP_ROUTES: Routes = [
   // other routes
 
   {
     path: 'identity',
     loadChildren: () =>
-      import('@abp/ng.identity').then(m =>
-        m.IdentityModule.forLazy({
+      import('@abp/ng.identity').then(c =>
+        c.createRoutes({
           toolbarActionContributors: identityToolbarActionContributors,
         })
       ),
@@ -181,7 +181,7 @@ const routes: Routes = [
 ];
 ```
 
-That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `IdentityModule` and it will be triggered by a custom button, i.e. `ClickMeButtonComponent`. Please note that **component projection is not limited to buttons** and you may use other UI components.
+That is it, `logUserNames` toolbar action will be added as the first action on the page toolbar in the users page (`UsersComponent`) of the `identity` package and it will be triggered by a custom button, i.e. `ClickMeButtonComponent`. Please note that **component projection is not limited to buttons** and you may use other UI components.
 
 ## How to Place a Custom Modal and Trigger It by Toolbar Actions
 
@@ -380,7 +380,7 @@ export const identityEntityActionContributors = {
 
 ### ToolbarActionContributorCallback\<R = any\>
 
-`ToolbarActionContributorCallback` is the type that you can pass as toolbar action contributor callbacks to static `forLazy` methods of the modules.
+`ToolbarActionContributorCallback` is the type that you can pass as toolbar action contributor callbacks to static `createRoutes` methods of the packages.
 
 ```js
 // exportUsersContributor should have ToolbarActionContributorCallback<IdentityUserDto[]> type

docs/en/framework/ui/angular/password-complexity-indicator-component.md

@@ -42,7 +42,7 @@ The `PasswordComplexityIndicatorService` is for calculating the password complex
 It's easy, imagine you have a password input that you want to add the complexity indicator under. Put this component under the input
 
 ```ts
-  <abp-password-complexity-indicator [progressBar]="ProgressBarStatsObject"></abp-password-complexity-indicator>
+  <abp-password-complexity-indicator [progressBar]="ProgressBarStatsObject" />
 ```
 
 - Pass the password to the `validatePassword` method of the `PasswordComplexityIndicatorService`, and bind return the value to the `progressBar` property of the `abp-password-complexity-indicator` 

docs/en/framework/ui/angular/permission-management.md

@@ -100,11 +100,10 @@ export class CustomPermissionService extends PermissionService {
 }
 ```
 
-- Then, in `app.module.ts`, provide this service as follows: 
+- Then, in `app.config.ts`, provide this service as follows: 
 
 ```js
-@NgModule({
-  // ...
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
     {
@@ -112,9 +111,7 @@ export class CustomPermissionService extends PermissionService {
       useExisting: CustomPermissionService,
     },
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
 That's it. Now, when a directive/guard asks for `PermissionService` from angular, it will inject your service.

docs/en/framework/ui/angular/pwa-configuration.md

@@ -38,7 +38,7 @@ So, Angular CLI updates some files and add a few others:
   - `serviceWorker` is `true` in production build.
   - `ngswConfigPath` refers to _ngsw-config.json_.
 - **package.json** has _@angular/service-worker_ as a new dependency.
-- **app.module.ts** imports `ServiceWorkerModule` and registers a service worker filename.
+- **app.config.ts** imports `ServiceWorkerModule` and registers a service worker filename.
 - **index.html** has following modifications:
   - A `<link>` element that refers to _manifest.webmanifest_.
   - A `<meta>` tag that sets a theme color.

docs/en/framework/ui/angular/quick-start.md

@@ -54,28 +54,27 @@ Here is what these folders and files are for:
 - **.vscode** has extension recommendations in it.
 - **e2e** is a separate app for possible end-to-end tests.
 - **src** is where the source files for your application are placed. We will have a closer look in a minute.
-- **.browserlistrc** helps [configuring browser compatibility of your Angular app](https://angular.io/guide/build#configuring-browser-compatibility).
+- **.browserlistrc** helps [configuring browser compatibility of your Angular app](https://angular.dev/tools/cli/build#configuring-browser-compatibility).
 - **.editorconfig** helps you have a shared coding style for separate editors and IDEs. Check [EditorConfig.org](https://editorconfig.org/) for details.
 - **.gitignore** defined which files and folders should not be tracked by git. Check [git documentation](https://git-scm.com/docs/gitignore) for details.
 - **.prettierrc** includes simple coding style choices for [Prettier](https://prettier.io/), an auto-formatter for TypeScript, HTML, CSS, and more. If you install recommended extensions to VS Code, you will never have to format your code anymore.
-- **angular.json** is where Angular workspace is defined. It holds project configurations and workspace preferences. Please refer to [Angular workspace configuration](https://angular.io/guide/workspace-config) for details.
+- **angular.json** is where Angular workspace is defined. It holds project configurations and workspace preferences. Please refer to [Angular workspace configuration](https://angular.dev/reference/configs/workspace-config) for details.
 - **karma.conf.js** holds [Karma test runner](https://karma-runner.github.io/) configurations.
-- **package.json** is where your [package dependencies](https://angular.io/guide/npm-packages) are listed. It also includes some useful scripts for developing, testing, and building your application.
+- **package.json** is where your [package dependencies](https://angular.dev/reference/configs/npm-packages) are listed. It also includes some useful scripts for developing, testing, and building your application.
 - **README.md** includes some of Angular CLI command examples. You either have to install Angular CLI globally or run these commands starting with `yarn` or `npx` to make them work.
-- **start.ps1** is a simple PowerShell script to install dependencies and start a [development server via Angular CLI](https://angular.io/cli/serve), but you probably will not need that after reading this document.
-- **tsconfig.json** and all other [tsconfig files](https://angular.io/guide/typescript-configuration) in general, include some TypeScript and Angular compile options.
+- **start.ps1** is a simple PowerShell script to install dependencies and start a [development server via Angular CLI](https://angular.dev/cli/serve), but you probably will not need that after reading this document.
+- **tsconfig.json** and all other [tsconfig files](https://angular.dev/reference/configs/angular-compiler-options) in general, include some TypeScript and Angular compile options.
 - **yarn.lock** enables installing consistent package versions across different devices so that working application build will not break because of a package update. Please read [Yarn documentation](https://classic.yarnpkg.com/en/docs/yarn-lock/) if you are interested in more information on the topic. If you have decided to use npm, please remove this file and keep the [package-lock.json](https://docs.npmjs.com/files/package-lock.json) instead.
 
 Now let us take a look at the contents of the source folder.
 
 <img alt="Angular project source folder structure" src="./images/quick-start---source-folder-structure.png" width="300px" style="max-width:100%">
 
-- **app** is the main directory you put your application files in. Any module, component, directive, service, pipe, guard, interceptor, etc. should be placed here. You are free to choose any folder structure, but [organizing Angular applications based on modules](https://angular.io/guide/module-types) is generally a fine practice.
-- **home** is a predefined module and acts as a welcome page. It also demonstrates how a feature-based folder structure may look like. More complex features will probably have sub-features, thus inner folders. You may change the home folder however you like.
-- **shared** is spared for reusable code that works for several modules. Some, including yours truly, may disagree with using a single module for all shared code, so consider adding standalone sub-modules inside this folder instead of adding everything into **shared.module.ts**.
-- **app-routing.module.ts** is where your top-level routes are defined. Angular is capable of [lazy loading feature modules](https://angular.io/guide/lazy-loading-ngmodules), so not all routes will be here. You may think of Angular routing as a tree and this file is the top of the tree.
+- **app** is the main directory you put your application files in. Any component, directive, service, pipe, guard, interceptor, etc. should be placed here. You are free to choose any folder structure, but [organizing Angular applications using configuration-based structure](https://angular.dev/reference/configs/file-structure) is generally a fine practice, especially when using standalone APIs. This replaces the older convention of organizing strictly by NgModules.
+- **home** is a predefined component and acts as a welcome page. It also demonstrates how a feature-based folder structure may look like. More complex features will probably have sub-features, thus inner folders. You may change the home folder however you like.
+- **app.routes.ts** is where your top-level routes are defined. Angular is capable of [lazy loading routes now](https://angular.dev/reference/migrations/route-lazy-loading), so not all routes will be here. You may think of Angular routing as a tree and this file is the top of the tree.
 - **app.component.ts** is essentially the top component that holds the dynamic application layout.
-- **app.module.ts** is the [root module](https://angular.io/guide/bootstrapping) that includes information about how parts of your application are related and what to run at the initiation of your application.
+- **app.config.ts** is the [root configuration](https://angular.dev/api/platform-browser/bootstrapApplication) that includes information about how parts of your application are related and what to run at the initiation of your application.
 - **route.provider.ts** is used for [modifying the menu](../angular/modifying-the-menu.md).
 - **assets** is for static files. A file (e.g. an image) placed in this folder will be available as is when the application is served.
 - **environments** includes one file per environment configuration. There are two configurations by default, but you may always introduce another one. These files are directly referred to in _angular.json_ and help you have different builds and application variables. Please refer to [configuring Angular application environments](https://angular.io/guide/build#configuring-application-environments) for details.
@@ -155,7 +154,7 @@ export const environment = {
 } as Config.Environment;
 ```
 
-When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.io/guide/workspace-config#build-configs) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build:
+When you run the development server, variables defined in _environment.ts_ take effect. Similarly, in production mode, the default environment is replaced by _environment.prod.ts_ and completely different variables become effective. You may even [create a new build configuration](https://angular.dev/reference/configs/workspace-config#alternate-build-configurations) and set [file replacements](https://angular.io/guide/build#configure-target-specific-file-replacements) to use a completely new environment. For now, we will start a production build:
 
 1. Open your terminal and navigate to the root Angular folder.
 2. Run `yarn` or `npm install` if you have not installed dependencies already.

docs/en/framework/ui/angular/show-password-directive.md

@@ -4,24 +4,20 @@ In password input, text can be shown easily via changing input type attribute to
 
 
 ## Getting Started
-`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to related module or your standalone component:
+`ShowPasswordDirective` is standalone. In order to use the it in an HTML template, import it to your component:
 
-**Importing to NgModule**
+**Importing to Component**
 ```ts
 import { ShowPasswordDirective } from '@abp/ng.core';
 
-@NgModule({
+@Component({
   //...
-  declarations: [
-   ...,
-   TestComponent
-  ],
   imports: [
-   ...,
+   // ...,
    ShowPasswordDirective
   ],
 })
-export class MyFeatureModule {}
+export class TestComponent {}
 ```
 
 ## Usage
@@ -30,28 +26,10 @@ The `ShowPasswordDirective` is very easy to use. The directive's selector is **`
 
 See an example usage:
 
-**NgModule Component usage**
-```ts
-@Component({
-  selector: 'test-component',
-  template: `
-    <div class="d-flex flex-column">
-      <label>Password</label>
-      <input [abpShowPassword]="showPassword"/>
-      <i (click)="showPassword = !showPassword">icon</i>
-    </div>
-  `
-})
-export class TestComponent{
-  showPassword = false;
-}
-```
-**Standalone Component usage**
 ```ts
 import { ShowPasswordDirective } from '@abp/ng.core';
 @Component({
-  selector: 'standalone-component',
-  standalone: true,
+  selector: 'sample-component',
   template: `
     <div class="d-flex flex-column">
       <label>Password</label>
@@ -61,7 +39,7 @@ import { ShowPasswordDirective } from '@abp/ng.core';
   `,
   imports: [ShowPasswordDirective]
 })
-export class StandaloneComponent{
+export class SampleComponent{
   showPassword = false;
 }
 ```

docs/en/framework/ui/angular/sorting-navigation-elements.md

@@ -19,19 +19,18 @@ This documentation describes how the navigation elements are sorted and how to c
 
 # How to Customize
 
-**`in app.module.ts`**
+**`in app.config.ts`**
 
 ```ts
 import { SORT_COMPARE_FUNC } from "@abp/ng.core";
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-    ...{
+    // ...
+    {
       provide: SORT_COMPARE_FUNC,
       useFactory: yourCompareFuncFactory,
     },
   ],
-  // imports, declarations, and bootstrap
-})
-export class AppModule {}
+};
 ```

docs/en/framework/ui/angular/toaster-service.md

@@ -4,7 +4,7 @@ You can use the `ToasterService` in @abp/ng.theme.shared package to display mess
 
 ## Getting Started
 
-You do not have to provide the `ToasterService` at module or component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
+You do not have to provide the `ToasterService` at component level, because it is already **provided in root**. You can inject and start using it immediately in your components, directives, or services.
 
 ```js
 import { ToasterService } from '@abp/ng.theme.shared';
@@ -170,19 +170,19 @@ export class CustomToasterService implements Toaster.Service {
 ```
 
 ```js
-// app.module.ts
+// app.config.ts
 
 import { ToasterService } from '@abp/ng.theme.shared';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
-      // ...
+    // ...
       {
         provide: ToasterService,
         useClass: CustomToasterService,
       },
-  ]
-})
+  ],
+};
 ```
 
 ## API

docs/en/modules/account-pro.md

@@ -301,47 +301,41 @@ See the `AccountPermissions` class members for all permissions defined for this
 
 #### Installation
 
-In order to configure the application to use the `AccountPublicModule` and the `AccountAdminModule`, you first need to import `AccountPublicConfigModule` from `@volo/abp.ng.account/public/config` and `AccountAdminConfigModule` from `@volo/abp.ng.account/admin/config` to root module. Config modules has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the public account module and the admin account module, you first need to import `provideAccountPublicConfig` from `@volo/abp.ng.account/public/config` and `provideAccountAdminConfig` from `@volo/abp.ng.account/admin/config`. Then, you will need to append them to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { AccountAdminConfigModule } from '@volo/abp.ng.account/admin/config';
-import { AccountPublicConfigModule } from '@volo/abp.ng.account/public/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    AccountPublicConfigModule.forRoot(),
-    AccountAdminConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideAccountPublicConfig } from '@volo/abp.ng.account/public/config';
+import { provideAccountAdminConfig } from '@volo/abp.ng.account/admin/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideAccountAdminConfig(),
+    provideAccountPublicConfig(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `AccountPublicModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.account/public`.
+The account public package should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.account/public`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+export const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'account',
-    loadChildren: () =>
-      import('@volo/abp.ng.account/public').then(m => m.AccountPublicModule.forLazy(/* options here */)),
+    loadChildren: () => import('@volo/abp.ng.account/public').then(c => c.createRoutes(/* options here */)),
   },
 ];
 
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has the modules.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has the necessary configurations.
 
 <h4 id="h-account-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `AccountModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **redirectUrl**: Default redirect URL after logging in.
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.

docs/en/modules/audit-logging-pro.md

@@ -131,7 +131,12 @@ To see `AbpAuditingOptions` properties, please see its [documentation](../framew
 Configure<ExpiredAuditLogDeleterOptions>(options =>
 {
     options.Period = (int)TimeSpan.FromSeconds(30).TotalMilliseconds;
-    options.CronExpression = "0 23 * * *"; // This Cron expression only works if Hangfire or Quartz is used for background workers.
+
+    // This Cron expression only works if Hangfire or Quartz is used for background workers.
+    // The Hangfire Cron expression is different from the Quartz Cron expression, Please refer to the following links:
+    // https://www.quartz-scheduler.net/documentation/quartz-3.x/tutorial/crontriggers.html#cron-expressions
+    // https://docs.hangfire.io/en/latest/background-methods/performing-recurrent-tasks.html
+    options.ExcelFileCleanupOptions.CronExpression = "0 23 * * *"; // Quartz Cron expression is "0 23 * * * ?"
 });
 ```
 
@@ -147,7 +152,12 @@ Configure<AuditLogExcelFileOptions>(options =>
     options.FileRetentionHours = 24; // How long to keep files before cleanup (default: 24 hours)
     options.DownloadBaseUrl = "https://yourdomain.com"; // Base URL for download links in emails
     options.ExcelFileCleanupOptions.Period = (int)TimeSpan.FromHours(24).TotalMilliseconds; // Interval of the cleanup worker (default: 24 hours)
-    options.ExcelFileCleanupOptions.CronExpression = "0 23 * * *"; // This Cron expression only works if Hangfire or Quartz is used for background workers. 
+
+    // This Cron expression only works if Hangfire or Quartz is used for background workers.
+    // The Hangfire Cron expression is different from the Quartz Cron expression, Please refer to the following links:
+    // https://www.quartz-scheduler.net/documentation/quartz-3.x/tutorial/crontriggers.html#cron-expressions
+    // https://docs.hangfire.io/en/latest/background-methods/performing-recurrent-tasks.html
+    options.ExcelFileCleanupOptions.CronExpression = "0 23 * * *"; // Quartz Cron expression is "0 23 * * * ?"
 });
 ```
 
@@ -234,45 +244,39 @@ See the `AbpAuditLoggingPermissions` class members for all permissions defined f
 
 #### Installation
 
-In order to configure the application to use the `AuditLoggingModule`, you first need to import `AuditLoggingConfigModule` from `@volo/abp.ng.audit-logging/config` to root module. `AuditLoggingConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the audit logging module, you first need to import `provideAuditLoggingConfig` from `@volo/abp.ng.audit-logging/config` to root configuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { AuditLoggingConfigModule } from '@volo/abp.ng.audit-logging/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    AuditLoggingConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideAuditLoggingConfig(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `AuditLoggingModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.audit-logging`.
+The audit logging module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.audit-logging`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+export const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'audit-logs',
-    loadChildren: () =>
-      import('@volo/abp.ng.audit-logging').then(m => m.AuditLoggingModule.forLazy(/* options here */)),
+    loadChildren: () => import('@volo/abp.ng.audit-logging').then(c => c.createRoutes(/* options here */)),
   },
 ];
 
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has both `AuditLoggingConfigModule` and `AuditLoggingModule`.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has both files configured.
 
 <h4 id="h-audit-logging-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `AuditLoggingModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/modules/chat.md

@@ -206,38 +206,33 @@ See the [connection strings](../framework/fundamentals/connection-strings.md) do
 
 #### Installation
 
-In order to configure the application to use the `ChatModule`, you first need to import `ChatConfigModule` from `@volo/abp.ng.chat/config` to root module. `ChatConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the chat module, you first need to import `provideChatConfig` from `@volo/abp.ng.chat/config` to root application confiuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { ChatConfigModule } from '@volo/abp.ng.chat/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    ChatConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideChatConfig } from '@volo/abp.ng.chat/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideChatConfig(),
   ],
-  // ...
-})
-export class AppModule {}
+};
+
 ```
 
-The `ChatModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. It is available for import from `@volo/abp.ng.chat`.
+The chat module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. It is available for import from `@volo/abp.ng.chat`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'chat',
     loadChildren: () =>
-      import('@volo/abp.ng.chat').then(m => m.ChatModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.chat').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
 #### Services / Models

docs/en/modules/cms-kit-pro/page-feedback.md

@@ -2,10 +2,9 @@
 
 > You must have an ABP Team or a higher license to use CMS Kit Pro module's features.
 
-The CMS Kit provides a **Page Feedback** system to collect feedback from users about pages.
+The CMS Kit Pro module provides a comprehensive **Page Feedback** system that enables you to collect valuable user feedback about your website pages. This system allows visitors to quickly rate their experience and provide comments, helping you understand user satisfaction and identify areas for improvement.
 
-| ![cmskit-module-page-feedback-widget](../../images/cmskit-module-page-feedback-widget.png) | ![cmskit-module-page-feedback-widget](../../images/cmskit-module-page-feedback-widget-2.png) |
-| ------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------- |
+![cmskit-module-page-feedback-widget](../../images/cmskit-module-page-feedback-widget.png)
 
 ## Enabling the Page Feedback System
 

docs/en/modules/cms-kit/index.md

@@ -72,6 +72,23 @@ CMS kit packages are designed for various usage scenarios. If you check the [CMS
  - `Volo.CmsKit.Public.*` packages contain the functionalities used in public websites where users read blog posts or leave comments.
  - `Volo.CmsKit.*` (without Admin/Public suffix) packages are called as unified packages. Unified packages are shortcuts for adding Admin & Public packages (of the related layer) separately. If you have a single application for administration and public web site, you can use these packages.
 
+## Integrating Public and Admin Packages in a Unified Application
+
+If you are using a single application for both admin and public web site, it's important to configure the global layout settings appropriately. By default, the layout is set for a **Public Website**, which is suitable for public-facing pages. However, when your application serves both admin and public pages, you should explicitly set the global layout for all CMS Kit pages.
+
+To do this, add a `_ViewStart.cshtml` file to your web project at `/Pages/Public/CmsKit/_ViewStart.cshtml` and configure the layout as shown below:
+
+```html
+@using Volo.Abp.AspNetCore.Mvc.UI.Theming
+@inject IThemeManager ThemeManager
+@{
+    // default: GetPublicLayout()
+    Layout = ThemeManager.CurrentTheme.GetApplicationLayout(); 
+}
+```
+
+> The `_ViewStart.cshtml` file is used to set the layout for all pages in the `CmsKit` folder.
+
 ## Internals
 
 ### Table / collection prefix & schema

docs/en/modules/gdpr.md

@@ -177,45 +177,46 @@ See the [connection strings](../framework/fundamentals/connection-strings.md) do
 
 ### Installation
 
-In order to configure the application to use the `GdprModule`, you first need to import `GdprConfigModule` from `@volo/abp.ng.gdpr/config` to the root module. `GdprConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the gdpr module, you first need to import `provideGdprConfig` from `@volo/abp.ng.gdpr/config` to the root configuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { GdprConfigModule } from '@volo/abp.ng.gdpr/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    GdprConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import {
+  provideGdprConfig,
+  withCookieConsentOptions,
+} from '@volo/abp.ng.gdpr/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideGdprConfig(
+      withCookieConsentOptions({
+        cookiePolicyUrl: '/gdpr-cookie-consent/cookie',
+        privacyPolicyUrl: '/gdpr-cookie-consent/privacy',
+      }),
+    ),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `GdprModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.gdpr`.
+The gdpr module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.gdpr`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+const APP_ROUTES: Routes = [
   // other route definitions
   {
     path: 'gdpr',
     loadChildren: () =>
-      import('@volo/abp.ng.gdpr').then(m => m.GdprModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.gdpr').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has both `GdprConfigModule` and `GdprModule`.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has both files configured.
 
 <h4 id="h-gdpr-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to the `GdprModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to the `createRoutes` static method:
 
 - **entityActionContributors:** Changes the grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes the page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/modules/identity-pro.md

@@ -343,45 +343,39 @@ See the `IdentityPermissions` class members for all permissions defined for this
 
 #### Installation
 
-In order to configure the application to use the `IdentityModule`, you first need to import `IdentityConfigModule` from `@volo/abp.ng.identity/config` to root module. `IdentityConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the identity module, you first need to import `provideIdentityConfig` from `@volo/abp.ng.identity/config` to root configuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { IdentityConfigModule } from '@volo/abp.ng.identity/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    IdentityConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideIdentityConfig } from '@volo/abp.ng.identity/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideIdentityConfig(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `IdentityModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity`.
+The identity module should be imported and lazy-loaded in your routing configuration. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'identity',
     loadChildren: () =>
-      import('@volo/abp.ng.identity').then(m => m.IdentityModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.identity').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has both `IdentityConfigModule` and `IdentityModule`.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has both configurations added.
 
 <h4 id="h-identity-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `IdentityModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/modules/identity-server-pro.md

@@ -245,45 +245,39 @@ See the `AbpIdentityServerPermissions` class members for all permissions defined
 
 #### Installation
 
-In order to configure the application to use the `IdentityServerModule`, you first need to import `IdentityServerConfigModule` from `@volo/abp.ng.identity-server/config` to root module. `IdentityServerConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the identity server, you first need to import `provideIdentityServerConfig` from `@volo/abp.ng.identity-server/config` to root configuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { IdentityServerConfigModule } from '@volo/abp.ng.identity-server/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    IdentityServerConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideIdentityServerConfig } from '@volo/abp.ng.identity-server/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideIdentityServerConfig()
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `IdentityServerModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity-server`.
+The identity server module should be imported and lazy-loaded in your routing module. It has a static `creatRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.identity-server`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
+// app.routes.ts
+const APP_ROUTES: Routes = [
   // other route definitions
   {
     path: 'identity-server',
     loadChildren: () =>
-      import('@volo/abp.ng.identity-server').then(m => m.IdentityServerModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.identity-server').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has both `IdentityServerConfigModule` and `IdentityServerModule`.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has both files configured.
 
 <h4 id="h-identity-server-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `IdentityServerModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/modules/language-management.md

@@ -149,45 +149,41 @@ See the `LanguageManagementPermissions` class members for all permissions define
 
 #### Installation
 
-To configure the application to use the `LanguageManagementModule`, you first need to import `LanguageManagementConfigModule` from `@volo/abp.ng.language-management/config` to root module. `LanguageManagementConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+To configure the application to use the language management module, you first need to import `provideLanguageManagementConfig` from `@volo/abp.ng.language-management/config` to root configuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { LanguageManagementConfigModule } from '@volo/abp.ng.language-management/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    LanguageManagementConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideLanguageManagementConfig()
   ],
-  // ...
-})
-export class AppModule {}
+};
+
 ```
 
-The `LanguageManagementModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.language-management`.
+The language management module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.language-management`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+
+const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'language-management',
     loadChildren: () =>
-      import('@volo/abp.ng.language-management').then(m => m.LanguageManagementModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.language-management').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything because it already has both `LanguageManagementConfigModule` and `LanguageManagementModule`.
+> If you have generated your project via the startup template, you do not have to do anything because it already has both configurations implemented.
 
 <h4 id="h-language-management-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `LanguageManagementModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/modules/payment.md

@@ -81,38 +81,36 @@ This page is used to send Name, Surname and Email Address of user to PayU.
 
 #### Installation
 
-In order to configure the application to use the `PaymentModule`, you first need to import `PaymentAdminConfigModule` from `@volo/abp.ng.payment/admin/config` to the root module. `PaymentAdminConfigModule` has a static `forRoot` method which you should call for a proper configuration:
+In order to configure the application to use the payment module, you first need to import `PaymentAdminConfigModule` from `@volo/abp.ng.payment/admin/config` to the root configuration. `PaymentAdminConfigModule` has a static `forRoot` method which you should call for a proper configuration:
 
 ```js
-// app.module.ts
+// app.config.ts
+import { ApplicationConfig, importProvidersFrom } from '@angular/core';
 import { PaymentAdminConfigModule } from '@volo/abp.ng.payment/admin/config';
 
-@NgModule({
-  imports: [
-    // other imports
-    PaymentAdminConfigModule.forRoot(),
-    // other imports
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    importProvidersFrom([
+      PaymentAdminConfigModule.forRoot()
+    ]),
   ],
-  // ...
-})
-export class AppModule {}
+};
+
 ```
 
-The `PaymentAdminModule` should be imported and lazy-loaded in your routing module as below:
+The payment admin module should be imported and lazy-loaded in your routing array as below:
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+const APP_ROUTES: Routes = [
+  // ...
   {
   path: 'payment',
   loadChildren: () =>
-    import('@volo/abp.ng.payment/admin').then(m => m.PaymentAdminModule.forLazy()),
+    import('@volo/abp.ng.payment/admin').then(c => c.createRoutes()),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
 #### Payment plans page

docs/en/modules/saas.md

@@ -244,45 +244,39 @@ See the `SaasHostPermissions` class members for all permissions defined for this
 
 #### Installation
 
-In order to configure the application to use the `SaasModule`, you first need to import `SaasConfigModule` from `@volo/abp.ng.saas/config` to root module. `SaasConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the saas module, you first need to import `provideSaasConfig` from `@volo/abp.ng.saas/config` to root module. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { SaasConfigModule } from '@volo/abp.ng.saas/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    SaasConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideSaasConfig } from '@volo/abp.ng.saas/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideSaasConfig(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `SaasModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.saas`.
+The saas module should be imported and lazy-loaded in your routing configuration. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.saas`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'saas',
     loadChildren: () =>
-      import('@volo/abp.ng.saas').then(m => m.SaasModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.saas').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has both `SaasConfigModule` and `SaasModule`.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has both configurations implemented.
 
 <h4 id="h-saas-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `SaasModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/modules/text-template-management.md

@@ -162,45 +162,39 @@ See the `TextTemplateManagementPermissions` class members for all permissions de
 
 #### Installation
 
-In order to configure the application to use the `TextTemplateManagementModule`, you first need to import `TextTemplateManagementConfigModule` from `@volo/abp.ng.text-template-management/config` to root module. `TextTemplateManagementConfigModule` has a static `forRoot` method which you should call for a proper configuration.
+In order to configure the application to use the text template management module, you first need to import `provideTextTemplateManagementConfig` from `@volo/abp.ng.text-template-management/config` to root configuration. Then, you will need to append it to the `appConfig` array.
 
 ```js
-// app.module.ts
-import { TextTemplateManagementConfigModule } from '@volo/abp.ng.text-template-management/config';
-
-@NgModule({
-  imports: [
-    // other imports
-    TextTemplateManagementConfigModule.forRoot(),
-    // other imports
+// app.config.ts
+import { provideTextTemplateManagementConfig } from '@volo/abp.ng.text-template-management/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideTextTemplateManagementConfig()
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-The `TextTemplateManagementModule` should be imported and lazy-loaded in your routing module. It has a static `forLazy` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.text-template-management`.
+The text template management module should be imported and lazy-loaded in your routing array. It has a static `createRoutes` method for configuration. Available options are listed below. It is available for import from `@volo/abp.ng.text-template-management`.
 
 ```js
-// app-routing.module.ts
-const routes: Routes = [
-  // other route definitions
+// app.routes.ts
+const APP_ROUTES: Routes = [
+  // ...
   {
     path: 'text-template-management',
     loadChildren: () =>
-      import('@volo/abp.ng.text-template-management').then(m => m.TextTemplateManagementModule.forLazy(/* options here */)),
+      import('@volo/abp.ng.text-template-management').then(c => c.createRoutes(/* options here */)),
   },
 ];
-
-@NgModule(/* AppRoutingModule metadata */)
-export class AppRoutingModule {}
 ```
 
-> If you have generated your project via the startup template, you do not have to do anything, because it already has both `TextTemplateManagementConfigModule` and `TextTemplateManagementModule`.
+> If you have generated your project via the startup template, you do not have to do anything, because it already has both configurations implemented.
 
 <h4 id="h-text-template-management-module-options">Options</h4>
 
-You can modify the look and behavior of the module pages by passing the following options to `TextTemplateManagementModule.forLazy` static method:
+You can modify the look and behavior of the module pages by passing the following options to `createRoutes` static method:
 
 - **entityActionContributors:** Changes grid actions. Please check [Entity Action Extensions for Angular](../framework/ui/angular/entity-action-extensions.md) for details.
 - **toolbarActionContributors:** Changes page toolbar. Please check [Page Toolbar Extensions for Angular](../framework/ui/angular/page-toolbar-extensions.md) for details.

docs/en/release-info/migration-guides/abp-9-3.md

@@ -2,6 +2,14 @@
 
 This document is a guide for upgrading ABP v9.2 solutions to ABP v9.3. There are some changes in this version that may affect your applications, please read it carefully and apply the necessary changes to your application.
 
+## Switched to `MySql.EntityFrameworkCore` for EF Core MySQL Provider
+
+In this version, we switched the EF Core MySQL provider from `Pomelo.EntityFrameworkCore.MySql` to `MySql.EntityFrameworkCore`. 
+
+If you want to use the `Pomelo.EntityFrameworkCore.MySql` provider, then you can follow the [Use Pomelo provider documentation](https://abp.io/docs/latest/framework/data/entity-framework-core/mysql#use-pomelo-provider) to migrate your application.
+
+> See the internal changes we made in [#23392](https://github.com/abpframework/abp/pull/23392), for implementation details.
+
 ## Updated `RabbitMQ.Client` to `7.x`
 
 In this version, we updated `RabbitMQ.Client` to `7.1.2`. [This is a major version update](https://github.com/rabbitmq/rabbitmq-dotnet-client/blob/main/v7-MIGRATION.md) that brings significant improvements to the library:

docs/en/solution-templates/application-module/index.md

@@ -183,45 +183,29 @@ The issue management page is empty in the beginning. You may change the content
 
 Now, let's have a closer look at some key elements of your project.
 
-### The Main Module
+### The Main Component
 
-`IssueManagementModule` at the _angular/projects/issue-management/src/lib/issue-management.module.ts_ path is the main module of your module project. There are a few things worth mentioning in it:
+`IssueManagementComponent` at the _angular/projects/issue-management/src/lib/issue-management.routes.ts_ path is the main component of your module project. There are a few things worth mentioning in it:
 
-- Essential ABP modules, i.e. `CoreModule` and `ThemeSharedModule`, are imported.
-- `IssueManagementRoutingModule` is imported.
-- `IssueManagementComponent` is declared.
-- It is prepared for configurability. The `forLazy` static method enables [a configuration to be passed to the module when it is loaded by the router](https://volosoft.com/blog/how-to-configure-angular-modules-loaded-by-the-router).
-
-
-### The Main Routing Module
-
-`IssueManagementRoutingModule` at the _angular/projects/issue-management/src/lib/issue-management-routing.module.ts_ path is the main routing module of your module project. It currently does two things:
-
-- Loads `DynamicLayoutComponent` at base path it is given.
-- Loads `IssueManagementComponent` as child to the layout, again at the given base path.
-
-You can rearrange this module to load more than one component at different routes, but you need to update the route provider at _angular/projects/issue-management/config/src/providers/route.provider.ts_ to match the new routing structure with the routes in the menu. Please check [Modifying the Menu](../../framework/ui/angular/modifying-the-menu.md) to see how route providers work.
+- `IssueManagementComponent` is declared as standalone within the latest migration.
+- `ISSUE_MANAGEMENT_ROUTES` is configured to be lazy-loaded.
 
 ### The Config Module
 
-There is a config module at the _angular/projects/issue-management/config/src/issue-management-config.module.ts_ path. The static `forRoot` method of this module is supposed to be called at the route level. So, you may assume the following will take place:
+There is a config module at the _angular/projects/issue-management/config/src/providers/route.provider.ts_ path. The static `provideIssueManagement` method of this module is supposed to be called at the route level. So, you may assume the following will take place:
 
 ```js
-@NgModule({
-  imports: [
-    /* other imports */
-
-    IssueManagementConfigModule.forRoot(),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideIssueManagement(),
+    // ...
   ],
-
-  /* rest of the module meta data */
-})
-export class AppModule {}
+};
 ```
 
 You can use this static method to configure an application that uses your module project. An example of such configuration is already implemented and the `ISSUE_MANAGEMENT_ROUTE_PROVIDERS` token is provided here. The method can take options which enables further configuration possibilities.
 
-The difference between the `forRoot` method of the config module and the `forLazy` method of the main module is that, for smallest bundle size, the former should only be used when you have to configure an app before your module is even loaded.
 
 ### Testing Angular UI
 

docs/en/solution-templates/layered-web-application/web-applications.md

@@ -49,25 +49,25 @@ The Angular application runs as a client-side SPA in the user's browser and comm
 
 ![angular-folder-structure](images/angular-folder-structure.png)
 
-Each of ABP modules is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules install with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder:
+Each of ABP module is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules are installed with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder:
 
 ```bash
 yarn list --pattern abp
 ```
 
-Angular application module structure:
+Angular application structure:
 
 ![Angular template structure diagram](images/angular-template-structure-diagram.png)
 
-### AppModule
+### Application Config
 
-`AppModule` is the root module of the application. Some of the ABP modules and some essential modules are imported to `AppModule`.
+Application config is the root configuration of the application. Some of the ABP modules and some essential providers are imported to `appConfig`.
 
-ABP Config modules have also been imported to `AppModule` for initial requirements of the lazy-loadable ABP modules.
+ABP Config modules have also been provided in `appConfig` for initial requirements of the lazy-loadable ABP modules.
 
-### AppRoutingModule
+### APP_ROUTES
 
-There are lazy-loadable ABP modules in the `AppRoutingModule` as routes.
+There are lazy-loadable ABP modules in the `APP_ROUTES` as routes.
 
 > Paths of ABP Modules should not be changed.
 
@@ -76,7 +76,7 @@ You should add `routes` property in the `data` object to add a link on the menu
 ```js
 {
    path: 'dashboard',
-   loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
+   loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent),
    canActivate: [authGuard, permissionGuard],
    data: {
       routes: {
@@ -97,19 +97,13 @@ In the above example;
 
 After the above `routes` definition, if the user is authorized, the dashboard link will appear on the menu.
 
-### Shared Module
-
-The modules that may be required for all modules have been imported to the `SharedModule`. You should import `SharedModule` to all modules.
-
-See the [Sharing Modules](https://angular.io/guide/sharing-ngmodules) document.
-
 ### Environments
 
 The files under the `src/environments` folder have the essential configuration of the application.
 
-### Home Module
+### Home Component
 
-Home module is an example lazy-loadable module that loads on the root address of the application.
+Home component is an example lazy-loadable component that loads on the root address of the application.
 
 ### Styles
 

docs/en/solution-templates/microservice/localization-system.md

@@ -92,12 +92,12 @@ You can define new localization entries in the language files under the **Locali
 
 Angular UI gets the localization resources from the [`application-localization`](../../framework/api-development/standard-apis/localization.md) API's response and merges these resources in the `ConfigStateService` for the localization entries/resources coming from the backend side.
 
-In addition, you may need to define some localization entries and only use them on the UI side. ABP already provides the related configuration for you, so you don't need to make any configurations related to that and instead you can directly define localization entries in the `app.-module.ts` file of your angular application as follows:
+In addition, you may need to define some localization entries and only use them on the UI side. ABP already provides the related configuration for you, so you don't need to make any configurations related to that and instead you can directly define localization entries in the `app.config.ts` file of your angular application as follows:
 
 ```ts
 import { provideAbpCore, withOptions } from '@abp/ng.core';
 
-@NgModule({
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
     provideAbpCore(
@@ -119,11 +119,8 @@ import { provideAbpCore, withOptions } from '@abp/ng.core';
         ]
       }),
     ),
-    ...
   ],
-})
-export class AppModule {}
-
+};
 ```
 
 After defining the localization entries, it can be used as below:

docs/en/suite/solution-structure.md

@@ -226,25 +226,21 @@ Angular application folder structure looks like below:
 ![angular-folder-structure](../images/angular-folder-structure.png)
 
 
-Each of ABP modules is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules install with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder:
+Each of ABP module is an NPM package. Some ABP modules are added as a dependency in `package.json`. These modules are installed with their dependencies. To see all ABP packages, you can run the following command in the `angular` folder:
 
 ```bash
 yarn list --pattern abp
 ```
 
-Angular application module structure:
+### Application Config
 
-![Angular template structure diagram](../images/angular-template-structure-diagram.png)
+Application config is the root module of the application. Some of ABP modules and some essential modules are imported to the `appConfig`.
 
-### AppModule
+ABP Config modules also have been imported to `appConfig`  for initially requirements of lazy-loadable ABP modules.
 
-`AppModule` is the root module of the application. Some of ABP modules and some essential modules imported to the `AppModule`.
+### APP_ROUTES
 
-ABP Config modules also have imported to `AppModule`  for initially requirements of lazy-loadable ABP modules.
-
-### AppRoutingModule
-
-There are lazy-loadable ABP modules in the `AppRoutingModule` as routes.
+There are lazy-loadable ABP modules in the `APP_ROUTES` as routes.
 
 > Paths of ABP Modules should not be changed.
 
@@ -253,7 +249,7 @@ You should add `routes` property in the `data` object to add a link on the menu
 ```js
 {
    path: 'dashboard',
-   loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
+   loadComponent: () => import('./dashboard/dashboard.component').then(c => c.DashboardComponent),
    canActivate: [authGuard, permissionGuard],
    data: {
       routes: {
@@ -274,25 +270,19 @@ In the above example;
 
 After the above `routes` definition, if the user is authorized, the dashboard link will appear on the menu.
 
-### Shared Module
-
-The modules that may be required for all modules have imported to the `SharedModule`. You should import the `SharedModule` to all modules.
-
-See the [Sharing Modules](https://angular.io/guide/sharing-ngmodules) document.
-
 ### Environments
 
 The files under the `src/environments` folder has the essential configuration of the application.
 
-### Home Module
+### Home Component
 
-Home module is an example lazy-loadable module that loads on the root address of the application.
+Home component is an example lazy-loadable standalone component that loads on the root address of the application.
 
-### Dashboard Module
+### Dashboard Component
 
-Dashboard module is a lazy-loadable module. `HostDashboardComponent` and `TenantDashboardComponent` declared to this module. One of these components is shown according to the user's authorization. 
+Dashboard component is a lazy-loadable component. `HostDashboardComponent` and `TenantDashboardComponent` are declared within this root component. One of these components is shown according to authorization of the user. 
 
-There are four widgets in the `HostDashboardComponent` which declared in ABP modules.
+There are four widgets in the `HostDashboardComponent` which are declared in ABP modules.
 
 ### Styles
 

docs/en/tutorials/microservice/part-05.md

@@ -516,14 +516,6 @@ abp generate-proxy -t ng -m ordering -u http://localhost:44311 --target ordering
 
 For more information, please refer to the [Service Proxies](https://abp.io/docs/latest/framework/ui/angular/service-proxies) documentation.
 
-### Create Order Module
-
-Run the following command line to create a new module, named `OrderModule` in the root folder of the angular application:
-
-```bash
-yarn ng generate module order --module ordering-service --project ordering-service --routing --route orders
-```
-
 ### Add Order Route
 
 * Create `order-base.routes.ts` file under the `projects/ordering-service/config/src/providers` folder and add the following code:
@@ -565,39 +557,102 @@ function configureRoutes() {
   routesService.add(routes);
 }
 ```
+* Open the `projects/ordering-service/config/src/providers/route.provider.ts` file and add `ORDERS_ORDER_ROUTE_PROVIDER` to the `ORDER_SERVICE_PROVIDERS` array as following code:
 
-* Open the `projects/ordering-service/config/src/ordering-service-config.module.ts` file and add `ORDERS_ORDER_ROUTE_PROVIDER` to the `providers` array as following code:
-
-*ordering-service-config.module.ts*
+*route.provider.ts*
 ```typescript
-import { ModuleWithProviders, NgModule } from '@angular/core';
-import { ORDERING_SERVICE_ROUTE_PROVIDERS } from './providers/route.provider';
-import { ORDERS_ORDER_ROUTE_PROVIDER } from './providers/order-route.provider';
-
-@NgModule()
-export class OrderingServiceConfigModule {
-  static forRoot(): ModuleWithProviders<OrderingServiceConfigModule> {
-    return {
-      ngModule: OrderingServiceConfigModule,
-      providers: [ORDERING_SERVICE_ROUTE_PROVIDERS, ORDERS_ORDER_ROUTE_PROVIDER],
-    };
-  }
+import { eLayoutType, RoutesService } from '@abp/ng.core';
+import {
+  EnvironmentProviders,
+  inject,
+  makeEnvironmentProviders,
+  provideAppInitializer,
+} from '@angular/core';
+import { eOrderingServiceRouteNames } from '../enums/route-names';
+import { ORDERS_ORDER_ROUTE_PROVIDER } from './order-route.provider';
+
+
+export const ORDER_SERVICE_ROUTE_PROVIDERS = [
+  provideAppInitializer(() => {
+    configureRoutes();
+  }),
+];
+
+export function configureRoutes() {
+  const routesService = inject(RoutesService);
+  routesService.add([
+    {
+      path: '/order-service',
+      name: eOrderingServiceRouteNames.OrderService,
+      iconClass: 'fas fa-book',
+      layout: eLayoutType.application,
+      order: 3,
+    },
+  ]);
+}
+
+const ORDER_SERVICE_PROVIDERS: EnvironmentProviders[] = [
+  ...ORDER_SERVICE_ROUTE_PROVIDERS,
+  ...ORDERS_ORDER_ROUTE_PROVIDER
+];
+
+export function provideOrderService() {
+  return makeEnvironmentProviders(ORDER_SERVICE_PROVIDERS);
 }
 ```
 
+* Do not forget adding `provideOrderService()` to the providers inside `app.config.ts` as follows:
+
+```typescript
+import { provideOrderService } from '@order-service/config';
+
+export const appConfig: ApplicationConfig = {
+  providers: [ 
+    // ...
+    provideOrderService()
+  ],
+};
+```
+
+* Lastly, you need to update the `APP_ROUTES` array in `app.routes.ts` file as follows:
+
+```typescript
+// app.routes.ts
+export const APP_ROUTES: Routes = [
+  // ...
+  {
+    path: 'order-service',
+    children: ORDER_SERVICE_ROUTES,
+  },
+];
+```
+
+```typescript
+// order-service.routes.ts
+export const ORDER_SERVICE_ROUTES: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    component: RouterOutletComponent,
+  },
+  { path: 'orders', children: ORDER_ROUTES },
+];
+```
+
 ### Create Order Page
 
 * Create `order.component.ts` file under the `projects/ordering-service/src/lib/order` folder as following code:
 
 ```typescript
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { OrderDto, OrderService } from './proxy/ordering-service/services';
 
 @Component({
   selector: 'lib-order',
-  standalone: false,
   templateUrl: './order.component.html',
   styleUrl: './order.component.css'
+  imports: [CommonModule]
 })
 export class OrderComponent {
 

docs/en/ui-themes/lepton-x-lite/angular.md

@@ -31,42 +31,33 @@ yarn add bootstrap-icons
 Note: You should remove the old theme styles from "angular.json" if you are switching from "ThemeBasic" or "Lepton."
 Look at the [Theme Configurations](../../framework/ui/angular/theme-configurations.md) list of styles. Depending on your theme, you can alter your styles in angular.json.
 
-- Finally, remove `ThemeBasicModule`, `provideThemeBasicConfig` from `app.module.ts`, and import the related modules in `app.module.ts`
+- Finally, remove `provideThemeBasicConfig` from `app.config.ts`, and import the related providers in `app.config.ts`
 
 ```js
-import { ThemeLeptonXModule } from "@abp/ng.theme.lepton-x";
+import { provideThemeLeptonX } from "@abp/ng.theme.lepton-x";
+import { provideSideMenuLayout } from "@abp/ng.theme.lepton-x/layouts";
 
-@NgModule({
-  imports: [
-    // ...
-    // do not forget to remove ThemeBasicModule or other old theme module
-    //  ThemeBasicModule
-    ThemeLeptonXModule.forRoot()
-  ],
+export const appConfig: ApplicationConfig = {
   providers: [
-    // do not forget to remove provideThemeBasicConfig or other old theme providers
-    // provideThemeBasicConfig
+    // ...
+    provideSideMenuLayout(),
+    provideThemeLeptonX(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should import the following module as well:
+Note: If you employ [Resource Owner Password Flow](../../framework/ui/angular/authorization.md#resource-owner-password-flow) for authorization, you should provide the following provider as well:
 
 ```js
-import { AccountLayoutModule } from "@abp/ng.theme.lepton-x/account";
+import { provideAccountLayout } from "@abp/ng.theme.lepton-x/account";
 
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    AccountLayoutModule.forRoot(),
+export const appConfig: ApplicationConfig = {
+  providers: [
     // ...
+    provideAccountLayout()
   ],
-  // ...
-})
-export class AppModule {}
+};
+
 ```
 
 To change the logos and brand color of `LeptonX`, simply add the following CSS to the `styles.scss`

docs/en/ui-themes/lepton-x/angular.md

@@ -9,51 +9,36 @@ To add `LeptonX` into your existing projects, follow the steps below.
 
 Add theme-specific styles into the `styles` array of the file. Check the [Theme Configurations](../../framework/ui/angular/theme-configurations.md#lepton-x-commercial) documentation for more information.
 
-Importing a CSS file as an ECMA module is not supported in Angular 14. Therefore, we need to add the styles in the angular.json file.
 
-- At last, remove `ThemeLeptonModule` from `app.module.ts` and `shared.module.ts`, and import the following modules in `app.module.ts`
+- At last, remove `provideThemeLepton` from `app.config.ts`, and add the following providers in `app.config.ts`
+
 
 ```ts
-import {
-  HttpErrorComponent,
-  ThemeLeptonXModule,
-} from "@volosoft/abp.ng.theme.lepton-x";
-import { SideMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts";
-
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    // ThemeLeptonModule.forRoot(), -> remove this line.
-    ThemeLeptonXModule.forRoot(),
-    SideMenuLayoutModule.forRoot(), // depends on which layout you choose
-    // ...
+import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
+import { provideSideMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
+// import { provideThemeLepton } from '@volo/abp.ng.theme.lepton'; 
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // provideThemeLepton() delete this
+    provideSideMenuLayout(), // depends on which layout you choose
+    provideThemeLeptonX(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
-If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add TopMenuLayoutModule as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
+If you want to use the **`Top Menu`** instead of the **`Side Menu`**, add `provideTopMenuLayout` as below,and [this style imports](https://docs.abp.io/en/abp/7.4/UI/Angular/Theme-Configurations#lepton-x-commercial)
 
 ```ts
-import {
-  HttpErrorComponent,
-  ThemeLeptonXModule,
-} from "@volosoft/abp.ng.theme.lepton-x";
-import { TopMenuLayoutModule } from "@volosoft/abp.ng.theme.lepton-x/layouts";
-
-@NgModule({
-  // ...
-  imports: [
-    // ...
-    // ThemeLeptonModule.forRoot(), -> remove this line.
-    ThemeLeptonXModule.forRoot(),
-    TopMenuLayoutModule.forRoot(),
+import { provideThemeLeptonX } from '@volosoft/abp.ng.theme.lepton-x';
+import { provideTopMenuLayout } from '@volosoft/abp.ng.theme.lepton-x/layouts';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideTopMenuLayout(),
+    provideThemeLeptonX(),
   ],
-  // ...
-})
-export class AppModule {}
+};
 ```
 
 - At this point, `LeptonX` theme should be up and running within your application. However, you may need to overwrite some css variables based your needs for every theme available as follows:

docs/en/ui-themes/lepton-x/angular/how-to-add-a-new-variation-to-lepton-x-for-angular.md

@@ -37,26 +37,20 @@ export const NEW_THEME_PROVIDER = [
 In this code snippet, we create a new instance of the LpxTheme class called myNewThemeDefinition. We specify the bundles that make up the theme (e.g., "bootstrap-custom" and "custom-theme"), the style name for the theme, a label to display in the UI, and an icon (using Bootstrap icons in this example).
 
 ### Step 2: Registering the New Theme Provider
-Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the app.module.ts file (or the module where LeptonX is configured), and add the following code:
+Now that we have defined the new theme appearance, we need to register it as a provider in our Angular project. Open the `app.config.ts` file (or the configuration where LeptonX is configured), and add the following code:
 
 ```js
 import { NEW_THEME_PROVIDER } from './new-theme.provider.ts';
 
-@NgModule({
-  imports: [
-    // ...
-  ],
+export const appConfig: ApplicationConfig = {
   providers: [
     // ...
-    NEW_THEME_PROVIDER,
+    NEW_THEME_PROVIDER
   ],
-  // ...
-})
-export class AppModule { }
-
+};
 ```
 
-By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular module. This makes the new theme appearance available throughout the application.
+By importing the `NEW_THEME_PROVIDER` from the file where we defined our theme, we can add it to the providers array of our Angular application configuration. This makes the new theme appearance available throughout the application.
 
 ### Step 3: Adding the Styles Path to angular.json
 

docs/en/ui-themes/lepton-x/angular/how-to-change-default-theme-option.md

@@ -1,26 +1,25 @@
 # Configuring the Default Theme for LeptonX
-The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the ThemeLeptonXModule provided by LeptonX.
+The LeptonX theme offers multiple appearances to suit your application's visual style. You can easily configure the default theme for your application using the `provideThemeLeptonX` provided by LeptonX.
 
 ### Configuration Code
-To set the default theme, you need to configure the ThemeLeptonXModule using the forRoot() function in your application's main module (often referred to as AppModule). Here's an example:
+To set the default theme, you need to configure the `provideThemeLeptonX` using the `withThemeLeptonXOptions({...})` function in the main configuration of your application (often referred to as appConfig). Here's an example:
+
 ```js
-import { ThemeLeptonXModule } from 'leptonx'; // Import the LeptonX theme module
+import { provideThemeLeptonX, withThemeLeptonXOptions } from '@volosoft/abp.ng.theme.lepton-x';
 
-@NgModule({
-  // ... Other module configurations
-  imports: [
-    // ... Other imported modules
-    ThemeLeptonXModule.forRoot({
-      defaultTheme: 'light', // Set the default theme to 'light'
-    }),
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideThemeLeptonX(
+      withThemeLeptonXOptions({
+        defaultTheme: 'light'
+      })
+    ),
   ],
-  bootstrap: [AppComponent],
-})
-export class AppModule {}
+};
 ```
- 
 
-In the example above, we've imported the ThemeLeptonXModule and configured it using the forRoot() function. By providing the defaultTheme parameter and setting its value to 'light',
+In the example above, we've imported the `provideThemeLeptonX` and `withThemeLeptonXOptions`, then configured it using the option parameters. By providing the `defaultTheme` parameter and setting its value to 'light'.
 
 If you delete the defaultTheme parameter in the configuration object, the LeptonX theme will use the default value of "System" as the default theme appearance.
 

docs/en/ui-themes/lepton-x/how-to-use-lepton-x-components-with-angular-custom-layout.md

@@ -5,25 +5,22 @@ First, The custom layout component should be created and implemented for the Ang
 Related content can be found in the [Component Replacement Document](../../framework/ui/angular/component-replacement.md#how-to-replace-a-layout)
 
 
- 
-After creating a custom layout, these imports should be imported in the `app.module.ts` file because the modules contain definitions of the Lepton X components.
+After creating a custom layout, these imports should be imported in the `app.config.ts` file because the modules contain definitions of the Lepton X components.
 
 
 ```javascript
-// app.module.ts
+// app.config.ts
 import { LpxSideMenuLayoutModule } from '@volosoft/ngx-lepton-x/layouts';
 import { LpxResponsiveModule } from '@volo/ngx-lepton-x.core';// optional. Only, if you are using lpxResponsive directive
 
- @NgModule({
- //... removed for clearity
-  imports: [
-  	//... removed for clearity
-  	LpxSideMenuLayoutModule,
-  	LpxResponsiveModule // <-- Optional
-  	]
-})
-export class AppModule {}
-
+export const appConfig: ApplicationConfig = {
+  providers: [
+    importProvidersFrom([
+      LpxSideMenuLayoutModule,
+  	  LpxResponsiveModule // <-- Optional
+    ])
+  ],
+};
 ```
 
 Here is the simplified version of the `side-menu-layout.ts` file. Only the ABP Component Replacement code has been removed.

docs/en/ui-themes/lepton/customizing-lepton-theme.md

@@ -12,19 +12,28 @@ You may want to change certain aspects of your website’s  appearance with a cu
 
 ## Adding Custom Style
 
-There is a `customStyle` boolean configuration in `ThemeLeptonModule`'s `forRoot` method. If this configuration is true, the style selection box is not included in the theme settings form and `ThemeLeptonModule` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`.
+There is a `customStyle` boolean configuration in `provideThemeLepton(withLeptonOptions({...}))` method. If this configuration is true, the style selection box is not included in the theme settings form and `theme-lepton` does not load its own styles. In this case, a custom style file must be added to the styles array in `angular.json` or must be imported by `style.scss`.
 
 > Only angular project styles can be changed in this way. If the authorization flow is authorization code flow, MVC pages (login, profile, etc) are not affected by this change.
 
 Custom style implementation can be done with the following steps
 
-Set `customStyle` property to `true` where is `ThemeLeptonModule` imported with `forRoot` method. 
+Set `customStyle` property to `true` where `provideThemeLepton(withLeptonOptions({...}))` method is called. 
 
 ```javascript
-// app.module.ts
-ThemeLeptonModule.forRoot({
-    customStyle: true
-})
+// app.config.ts
+import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideThemeLepton(
+      withLeptonOptions({
+        customStyle: true
+      })
+    )
+  ],
+};
 ```
 
 Import your style file to `src/style.scss`
@@ -68,7 +77,7 @@ Or add your style file to the `styles` arrays which in `angular.json` file
 
 ## Inserting Custom Content To Lepton Menu
 
-Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `ThemeLeptonModule.forRoot` when you import the module in your root module, i.e. `AppModule`. Let's take a look at some examples.
+Lepton menu can take custom content both before and after the menu items displayed. In order to achieve this, pass a component as content through the parameters of `provideThemeLepton(withLeptonOptions({...}))` when you import the provider in your root app configuration, i.e. `appConfig`. Let's take a look at some examples.
 
 
 ### Placing Custom Content Before & After Menu Items
@@ -76,7 +85,10 @@ Lepton menu can take custom content both before and after the menu items display
 First step is to create a component which will serve as the custom content.
 
 ```js
+// ...
 @Component({
+  // ...
+  imports: [AsyncPipe],
   template: `<a href="https://support.my-domain.com">
     <span class="lp-icon"><i class="fas fa-headset"></i></span>
     <span class="lp-text">Support Issues</span>
@@ -88,27 +100,23 @@ First step is to create a component which will serve as the custom content.
 export class SupportLinkComponent {
   issueCount$ = of(26); // dummy count, replace this with an actual service
 }
-
-@NgModule({
-  declarations: [SupportLinkComponent],
-  imports: [CommonModule],
-})
-export class SupportLinkModule {}
 ```
 
-Now, pass this component as `contentAfterRoutes` option to `ThemeLeptonModule`.
+Now, pass this component as `contentAfterRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`.
 
 ```js
-@NgModule({
-  imports: [
-    // other imports are removed for sake of brevity
-    SupportLinkModule,
-    ThemeLeptonModule.forRoot({
-      contentAfterRoutes: [SupportLinkComponent],
-    })
+import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideThemeLepton(
+      withLeptonOptions({
+        contentAfterRoutes: [SupportLinkComponent],
+      })
+    )
   ],
-})
-export class AppModule {}
+};
 ```
 
 If you start the dev server, you must see the inserted content as follows:
@@ -124,24 +132,25 @@ Placing the content before menu items is straightforward: Just replace `contentA
 
 ### Placing a Search Input Before Menu Items
 
-The Lepton package has a search component designed to work with the routes in the menu. You can simply import the module and pass the component as `contentBeforeRoutes` option to `ThemeLeptonModule`.
+The Lepton package has a search component designed to work with the routes in the menu. You can simply import the provider and pass the component as `contentBeforeRoutes` option to `provideThemeLepton(withLeptonOptions({...}))`.
 
 ```js
-import { MenuSearchComponent, MenuSearchModule } from '@volo/abp.ng.theme.lepton/extensions';
-
-@NgModule({
-  imports: [
-    // other imports are removed for sake of brevity
-
-    MenuSearchModule.forRoot({
+import { provideThemeLepton, withOptions as withLeptonOptions } from '@volo/abp.ng.theme.lepton';
+import { MenuSearchComponent, provideMenuSearch } from '@volo/abp.ng.theme.lepton/extensions';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    // ...
+    provideThemeLepton(
+      withLeptonOptions({
+        contentBeforeRoutes: [MenuSearchComponent],
+      })
+    ),
+    provideMenuSearch({
       limit: 3 // search result limit (default: Infinity)
-    }),
-    ThemeLeptonModule.forRoot({
-      contentBeforeRoutes: [MenuSearchComponent],
     })
   ],
-})
-export class AppModule {}
+};
 ```
 
 Here is how the search input works:

framework/src/Volo.Abp.Cli.Core/Volo/Abp/Cli/LIbs/InstallLibsService.cs

@@ -48,11 +48,6 @@ public class InstallLibsService : IInstallLibsService, ITransientDependency
             return;
         }
 
-        if (!NpmHelper.IsYarnAvailable())
-        {
-            Logger.LogWarning("YARN is not installed, which may cause package inconsistency. ABP uses 'npx yarn <command>' behind the scenes to prevent possible inconsistencies.");
-        }
-
         Logger.LogInformation($"Found {projectPaths.Count} projects.");
         foreach (var projectPath in projectPaths)
         {

framework/src/Volo.Abp.Core/Volo/Abp/Reflection/TypeHelper.cs

@@ -80,6 +80,37 @@ public static class TypeHelper
         return false;
     }
 
+    public static TProperty? ChangeTypePrimitiveExtended<TProperty>(object? value)
+    {
+        if (value == null)
+        {
+            return default;
+        }
+        
+        if (IsPrimitiveExtended(typeof(TProperty), includeEnums: true))
+        {
+            var conversionType = typeof(TProperty);
+            if (IsNullable(conversionType))
+            {
+                conversionType = conversionType.GetFirstGenericArgumentIfNullable();
+            }
+
+            if (conversionType == typeof(Guid))
+            {
+                return (TProperty)TypeDescriptor.GetConverter(conversionType).ConvertFromInvariantString(value.ToString()!)!;
+            }
+
+            if (conversionType.IsEnum)
+            {
+                return (TProperty)Enum.Parse(conversionType, value.ToString()!);
+            }
+
+            return (TProperty)Convert.ChangeType(value, conversionType, CultureInfo.InvariantCulture);
+        }
+
+        throw new AbpException("ChangeTypePrimitiveExtended<TProperty> does not support non-primitive types. Use non-generic GetProperty method and handle type casting manually.");
+    }
+
     public static bool IsNullable(Type type)
     {
         return type.IsGenericType && type.GetGenericTypeDefinition() == typeof(Nullable<>);

framework/src/Volo.Abp.Ddd.Domain/Volo/Abp/Domain/Repositories/BasicRepositoryBase.cs

@@ -43,6 +43,13 @@ public abstract class BasicRepositoryBase<TEntity> :
     public IEntityChangeTrackingProvider EntityChangeTrackingProvider => LazyServiceProvider.LazyGetRequiredService<IEntityChangeTrackingProvider>();
 
     public bool? IsChangeTrackingEnabled { get; protected set; }
+    
+    protected string? EntityName { get; private set; }
+    
+    public void SetEntityName(string? name)
+    {
+        EntityName = name;
+    }
 
     protected BasicRepositoryBase()
     {

framework/src/Volo.Abp.Ddd.Domain/Volo/Abp/Domain/Repositories/IRepository.cs

@@ -13,6 +13,8 @@ namespace Volo.Abp.Domain.Repositories;
 public interface IRepository
 {
     bool? IsChangeTrackingEnabled { get; }
+
+    void SetEntityName(string? name);
 }
 
 public interface IRepository<TEntity> : IReadOnlyRepository<TEntity>, IBasicRepository<TEntity>

framework/src/Volo.Abp.Ddd.Domain/Volo/Abp/Domain/Repositories/RepositoryExtensions.cs

@@ -250,4 +250,13 @@ public static class RepositoryExtensions
         hardDeleteEntities.Add(entity);
         await repository.DeleteAsync(entity, autoSave, cancellationToken);
     }
+    
+    public static TRepository WithEntityName<TRepository>(
+        this TRepository repository,
+        string name
+        ) where TRepository : class, IRepository
+    {
+        repository.SetEntityName(name);
+        return repository;
+    }
 }

framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/Domain/Repositories/EntityFrameworkCore/EfCoreRepository.cs

@@ -61,7 +61,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
     }
 
     [Obsolete("Use GetDbSetAsync() method.")]
-    public virtual DbSet<TEntity> DbSet => DbContext.Set<TEntity>();
+    public virtual DbSet<TEntity> DbSet => GetDbSetInternal(DbContext);
 
     Task<DbSet<TEntity>> IEfCoreRepository<TEntity>.GetDbSetAsync()
     {
@@ -70,7 +70,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
 
     protected async Task<DbSet<TEntity>> GetDbSetAsync()
     {
-        return (await GetDbContextAsync()).Set<TEntity>();
+        return GetDbSetInternal(await GetDbContextAsync());
     }
 
     protected async Task<IDbConnection> GetDbConnectionAsync()
@@ -110,7 +110,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
 
         var dbContext = await GetDbContextAsync();
 
-        var savedEntity = (await dbContext.Set<TEntity>().AddAsync(entity, GetCancellationToken(cancellationToken))).Entity;
+        var savedEntity = (await GetDbSetInternal(dbContext).AddAsync(entity, GetCancellationToken(cancellationToken))).Entity;
 
         if (autoSave)
         {
@@ -120,6 +120,13 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
         return savedEntity;
     }
 
+    private DbSet<TEntity> GetDbSetInternal(TDbContext dbContext)
+    {
+        return EntityName != null
+            ? dbContext.Set<TEntity>(EntityName)
+            : dbContext.Set<TEntity>();
+    }
+
     public async override Task InsertManyAsync(IEnumerable<TEntity> entities, bool autoSave = false, CancellationToken cancellationToken = default)
     {
         var entityArray = entities.ToArray();
@@ -147,7 +154,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
             return;
         }
 
-        await dbContext.Set<TEntity>().AddRangeAsync(entityArray, cancellationToken);
+        await GetDbSetInternal(dbContext).AddRangeAsync(entityArray, cancellationToken);
 
         if (autoSave)
         {
@@ -159,9 +166,10 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
     {
         var dbContext = await GetDbContextAsync();
 
-        if (dbContext.Set<TEntity>().Local.All(e => e != entity))
+        var dbSet = GetDbSetInternal(dbContext);
+        if (dbSet.Local.All(e => e != entity))
         {
-            dbContext.Set<TEntity>().Attach(entity);
+            dbSet.Attach(entity);
             dbContext.Update(entity);
         }
 
@@ -197,7 +205,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
 
         var dbContext = await GetDbContextAsync();
 
-        dbContext.Set<TEntity>().UpdateRange(entityArray);
+        GetDbSetInternal(dbContext).UpdateRange(entityArray);
 
         if (autoSave)
         {
@@ -209,7 +217,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
     {
         var dbContext = await GetDbContextAsync();
 
-        dbContext.Set<TEntity>().Remove(entity);
+        GetDbSetInternal(dbContext).Remove(entity);
 
         if (autoSave)
         {
@@ -318,7 +326,7 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
     public async override Task DeleteAsync(Expression<Func<TEntity, bool>> predicate, bool autoSave = false, CancellationToken cancellationToken = default)
     {
         var dbContext = await GetDbContextAsync();
-        var dbSet = dbContext.Set<TEntity>();
+        var dbSet = GetDbSetInternal(dbContext);
 
         var entities = await dbSet
             .Where(predicate)
@@ -335,8 +343,9 @@ public class EfCoreRepository<TDbContext, TEntity> : RepositoryBase<TEntity>, IE
     public async override Task DeleteDirectAsync(Expression<Func<TEntity, bool>> predicate, CancellationToken cancellationToken = default)
     {
         var dbContext = await GetDbContextAsync();
-        var dbSet = dbContext.Set<TEntity>();
-        await dbSet.Where(predicate).ExecuteDeleteAsync(GetCancellationToken(cancellationToken));
+        await GetDbSetInternal(dbContext)
+            .Where(predicate)
+            .ExecuteDeleteAsync(GetCancellationToken(cancellationToken));
     }
 
     public virtual async Task EnsureCollectionLoadedAsync<TProperty>(

framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/AbpDbContext.cs

@@ -37,6 +37,7 @@ using Volo.Abp.Reflection;
 using Volo.Abp.Timing;
 using Volo.Abp.Uow;
 using Microsoft.EntityFrameworkCore.Diagnostics;
+using Microsoft.EntityFrameworkCore.Metadata.Builders;
 
 namespace Volo.Abp.EntityFrameworkCore;
 
@@ -124,19 +125,9 @@ public abstract class AbpDbContext<TDbContext> : DbContext, IAbpEfCoreDbContext,
 
         TrySetDatabaseProvider(modelBuilder);
 
-        foreach (var entityType in modelBuilder.Model.GetEntityTypes())
+        foreach (var entityType in modelBuilder.Model.GetEntityTypes().ToArray())
         {
-            ConfigureBasePropertiesMethodInfo
-                .MakeGenericMethod(entityType.ClrType)
-                .Invoke(this, new object[] { modelBuilder, entityType });
-
-            ConfigureValueConverterMethodInfo
-                .MakeGenericMethod(entityType.ClrType)
-                .Invoke(this, new object[] { modelBuilder, entityType });
-
-            ConfigureValueGeneratedMethodInfo
-                .MakeGenericMethod(entityType.ClrType)
-                .Invoke(this, new object[] { modelBuilder, entityType });
+            ConfigureEntityTypeProperties(modelBuilder, entityType);
         }
 
         if (LazyServiceProvider == null || Options == null)
@@ -151,6 +142,23 @@ public abstract class AbpDbContext<TDbContext> : DbContext, IAbpEfCoreDbContext,
         }
     }
 
+    protected virtual void ConfigureEntityTypeProperties(
+        ModelBuilder modelBuilder,
+        IMutableEntityType entityType)
+    {
+        ConfigureBasePropertiesMethodInfo
+            .MakeGenericMethod(entityType.ClrType)
+            .Invoke(this, new object[] { modelBuilder, entityType });
+
+        ConfigureValueConverterMethodInfo
+            .MakeGenericMethod(entityType.ClrType)
+            .Invoke(this, new object[] { modelBuilder, entityType });
+
+        ConfigureValueGeneratedMethodInfo
+            .MakeGenericMethod(entityType.ClrType)
+            .Invoke(this, new object[] { modelBuilder, entityType });
+    }
+
     protected override void ConfigureConventions(ModelConfigurationBuilder configurationBuilder)
     {
         base.ConfigureConventions(configurationBuilder);
@@ -762,7 +770,9 @@ public abstract class AbpDbContext<TDbContext> : DbContext, IAbpEfCoreDbContext,
         AuditPropertySetter?.IncrementEntityVersionProperty(entry.Entity);
     }
 
-    protected virtual void ConfigureBaseProperties<TEntity>(ModelBuilder modelBuilder, IMutableEntityType mutableEntityType)
+    protected virtual void ConfigureBaseProperties<TEntity>(
+        ModelBuilder modelBuilder,
+        IMutableEntityType mutableEntityType)
         where TEntity : class
     {
         if (mutableEntityType.IsOwned())
@@ -775,54 +785,82 @@ public abstract class AbpDbContext<TDbContext> : DbContext, IAbpEfCoreDbContext,
             return;
         }
 
-        modelBuilder.Entity<TEntity>().ConfigureByConvention();
+        var entityTypeBuilder = CreateEntityTypeBuilderFromMutableEntityType<TEntity>(
+            modelBuilder,
+            mutableEntityType
+        );
+        
+        entityTypeBuilder.ConfigureByConvention();
+
+        ConfigureGlobalFilters<TEntity>(modelBuilder, mutableEntityType, entityTypeBuilder);
+    }
 
-        ConfigureGlobalFilters<TEntity>(modelBuilder, mutableEntityType);
+    protected virtual EntityTypeBuilder<TEntity> CreateEntityTypeBuilderFromMutableEntityType<TEntity>(
+        ModelBuilder modelBuilder,
+        IMutableEntityType mutableEntityType) where TEntity : class
+    {
+        return mutableEntityType.HasSharedClrType
+            ? modelBuilder.SharedTypeEntity<TEntity>(mutableEntityType.Name)
+            : modelBuilder.Entity<TEntity>();
     }
 
-    protected virtual void ConfigureGlobalFilters<TEntity>(ModelBuilder modelBuilder, IMutableEntityType mutableEntityType)
+    protected virtual void ConfigureGlobalFilters<TEntity>(
+        ModelBuilder modelBuilder,
+        IMutableEntityType mutableEntityType, 
+        EntityTypeBuilder<TEntity> entityTypeBuilder)
         where TEntity : class
     {
         if (mutableEntityType.BaseType == null && ShouldFilterEntity<TEntity>(mutableEntityType))
         {
-            var filterExpression = CreateFilterExpression<TEntity>(modelBuilder);
+            var filterExpression = CreateFilterExpression<TEntity>(modelBuilder, entityTypeBuilder);
             if (filterExpression != null)
             {
-                modelBuilder.Entity<TEntity>().HasAbpQueryFilter(filterExpression);
+                entityTypeBuilder.HasAbpQueryFilter(filterExpression);
             }
         }
     }
 
-    protected virtual void ConfigureValueConverter<TEntity>(ModelBuilder modelBuilder, IMutableEntityType mutableEntityType)
+    protected virtual void ConfigureValueConverter<TEntity>(
+        ModelBuilder modelBuilder,
+        IMutableEntityType mutableEntityType)
         where TEntity : class
     {
-        if (mutableEntityType.BaseType == null &&
-            !typeof(TEntity).IsDefined(typeof(DisableDateTimeNormalizationAttribute), true) &&
-            !typeof(TEntity).IsDefined(typeof(OwnedAttribute), true) &&
-            !mutableEntityType.IsOwned())
+        if (mutableEntityType.BaseType != null ||
+            typeof(TEntity).IsDefined(typeof(DisableDateTimeNormalizationAttribute), true) ||
+            typeof(TEntity).IsDefined(typeof(OwnedAttribute), true) ||
+            mutableEntityType.IsOwned())
         {
-            if (LazyServiceProvider == null || Clock == null)
-            {
-                return;
-            }
+            return;
+        }
 
-            foreach (var property in mutableEntityType.GetProperties().
-                         Where(property => property.PropertyInfo != null &&
-                                           (property.PropertyInfo.PropertyType == typeof(DateTime) || property.PropertyInfo.PropertyType == typeof(DateTime?)) &&
-                                           property.PropertyInfo.CanWrite &&
-                                           ReflectionHelper.GetSingleAttributeOfMemberOrDeclaringTypeOrDefault<DisableDateTimeNormalizationAttribute>(property.PropertyInfo) == null))
-            {
-                modelBuilder
-                    .Entity<TEntity>()
-                    .Property(property.Name)
-                    .HasConversion(property.ClrType == typeof(DateTime)
-                        ? new AbpDateTimeValueConverter(Clock)
-                        : new AbpNullableDateTimeValueConverter(Clock));
-            }
+        if (LazyServiceProvider == null || Clock == null)
+        {
+            return;
+        }
+        
+
+        foreach (var property in mutableEntityType.GetProperties().
+                     Where(property => property.PropertyInfo != null &&
+                                       (property.PropertyInfo.PropertyType == typeof(DateTime) || property.PropertyInfo.PropertyType == typeof(DateTime?)) &&
+                                       property.PropertyInfo.CanWrite &&
+                                       ReflectionHelper.GetSingleAttributeOfMemberOrDeclaringTypeOrDefault<DisableDateTimeNormalizationAttribute>(property.PropertyInfo) == null))
+        {
+            var entityTypeBuilder = CreateEntityTypeBuilderFromMutableEntityType<TEntity>(
+                modelBuilder,
+                mutableEntityType
+            );
+            
+            entityTypeBuilder
+                .Property(property.Name)
+                .HasConversion(property.ClrType == typeof(DateTime)
+                    ? new AbpDateTimeValueConverter(Clock)
+                    : new AbpNullableDateTimeValueConverter(Clock));
         }
     }
 
-    protected virtual void ConfigureValueGenerated<TEntity>(ModelBuilder modelBuilder, IMutableEntityType mutableEntityType)
+    protected virtual void ConfigureValueGenerated<TEntity>(
+        ModelBuilder modelBuilder, 
+        IMutableEntityType mutableEntityType)
         where TEntity : class
     {
         if (!typeof(IEntity<Guid>).IsAssignableFrom(typeof(TEntity)))
@@ -830,7 +868,8 @@ public abstract class AbpDbContext<TDbContext> : DbContext, IAbpEfCoreDbContext,
             return;
         }
 
-        var idPropertyBuilder = modelBuilder.Entity<TEntity>().Property(x => ((IEntity<Guid>)x).Id);
+        var entityTypeBuilder = CreateEntityTypeBuilderFromMutableEntityType<TEntity>(modelBuilder, mutableEntityType);
+        var idPropertyBuilder = entityTypeBuilder.Property(x => ((IEntity<Guid>)x).Id);
         if (idPropertyBuilder.Metadata.PropertyInfo!.IsDefined(typeof(DatabaseGeneratedAttribute), true))
         {
             return;
@@ -854,25 +893,30 @@ public abstract class AbpDbContext<TDbContext> : DbContext, IAbpEfCoreDbContext,
         return false;
     }
 
-    protected virtual Expression<Func<TEntity, bool>>? CreateFilterExpression<TEntity>(ModelBuilder modelBuilder)
+    protected virtual Expression<Func<TEntity, bool>>? CreateFilterExpression<TEntity>(
+        ModelBuilder modelBuilder,
+        EntityTypeBuilder<TEntity> entityTypeBuilder)
         where TEntity : class
     {
         Expression<Func<TEntity, bool>>? expression = null;
 
         if (typeof(ISoftDelete).IsAssignableFrom(typeof(TEntity)))
         {
-            var softDeleteColumnName = modelBuilder.Entity<TEntity>().Metadata.FindProperty(nameof(ISoftDelete.IsDeleted))?.GetColumnName() ?? "IsDeleted";
+            var softDeleteColumnName = entityTypeBuilder.Metadata.FindProperty(nameof(ISoftDelete.IsDeleted))?.GetColumnName() ?? "IsDeleted";
             expression = e => !IsSoftDeleteFilterEnabled || !EF.Property<bool>(e, softDeleteColumnName);
             if (UseDbFunction())
             {
                 expression = e => AbpEfCoreDataFilterDbFunctionMethods.SoftDeleteFilter(((ISoftDelete)e).IsDeleted, true);
-                modelBuilder.ConfigureSoftDeleteDbFunction(AbpEfCoreDataFilterDbFunctionMethods.SoftDeleteFilterMethodInfo, this.GetService<AbpEfCoreCurrentDbContext>());
+                modelBuilder.ConfigureSoftDeleteDbFunction(
+                    AbpEfCoreDataFilterDbFunctionMethods.SoftDeleteFilterMethodInfo,
+                    this.GetService<AbpEfCoreCurrentDbContext>()
+                );
             }
         }
 
         if (typeof(IMultiTenant).IsAssignableFrom(typeof(TEntity)))
         {
-            var multiTenantColumnName = modelBuilder.Entity<TEntity>().Metadata.FindProperty(nameof(IMultiTenant.TenantId))?.GetColumnName() ?? "TenantId";
+            var multiTenantColumnName = entityTypeBuilder.Metadata.FindProperty(nameof(IMultiTenant.TenantId))?.GetColumnName() ?? "TenantId";
             Expression<Func<TEntity, bool>> multiTenantFilter = e => !IsMultiTenantFilterEnabled || EF.Property<Guid>(e, multiTenantColumnName) == CurrentTenantId;
             if (UseDbFunction())
             {

framework/src/Volo.Abp.EntityFrameworkCore/Volo/Abp/EntityFrameworkCore/IEfCoreDbContext.cs

@@ -31,6 +31,9 @@ public interface IEfCoreDbContext : IDisposable, IInfrastructure<IServiceProvide
 
     DbSet<T> Set<T>()
         where T : class;
+    
+    DbSet<T> Set<T>(string name)
+        where T : class;
 
     DatabaseFacade Database { get; }
 

framework/src/Volo.Abp.EventBus.Rebus/Volo/Abp/EventBus/Rebus/AbpEventBusRebusModule.cs

@@ -1,8 +1,10 @@
 using Microsoft.Extensions.DependencyInjection;
+using Microsoft.Extensions.Options;
 using Rebus.Config;
 using Rebus.Handlers;
 using Rebus.Pipeline;
 using Rebus.Pipeline.Receive;
+using Rebus.ServiceProvider;
 using Volo.Abp.Modularity;
 
 namespace Volo.Abp.EventBus.Rebus;
@@ -16,11 +18,12 @@ public class AbpEventBusRebusModule : AbpModule
         context.Services.AddTransient(typeof(IHandleMessages<>), typeof(RebusDistributedEventHandlerAdapter<>));
 
         var preActions = context.Services.GetPreConfigureActions<AbpRebusEventBusOptions>();
-        Configure<AbpRebusEventBusOptions>(rebusOptions =>
+        var rebusOptions = preActions.Configure();
+        Configure<AbpRebusEventBusOptions>(options =>
         {
-            preActions.Configure(rebusOptions);
+            preActions.Configure(options);
         });
-
+        
         context.Services.AddRebus(configure =>
         {
             configure.Options(options =>
@@ -34,9 +37,9 @@ public class AbpEventBusRebusModule : AbpModule
                 });
             });
 
-            preActions.Configure().Configurer?.Invoke(configure);
+            rebusOptions.Configurer?.Invoke(configure);
             return configure;
-        });
+        }, startAutomatically: false, key: rebusOptions.RebusInstanceName);
     }
 
     public override void OnApplicationInitialization(ApplicationInitializationContext context)
@@ -46,6 +49,9 @@ public class AbpEventBusRebusModule : AbpModule
             .GetRequiredService<RebusDistributedEventBus>()
             .Initialize();
 
-        context.ServiceProvider.StartRebus();
+        var rebusOptions = context.ServiceProvider.GetRequiredService<IOptions<AbpRebusEventBusOptions>>().Value;
+        context.ServiceProvider
+            .GetRequiredService<IBusRegistry>()
+            .StartBus(rebusOptions.RebusInstanceName);
     }
 }

framework/src/Volo.Abp.EventBus.Rebus/Volo/Abp/EventBus/Rebus/AbpRebusEventBusOptions.cs

@@ -10,10 +10,10 @@ namespace Volo.Abp.EventBus.Rebus;
 
 public class AbpRebusEventBusOptions
 {
-    [NotNull]
-    public string InputQueueName { get; set; } = default!;
+    public string InputQueueName { get; set; } = null!;
+    
+    public string RebusInstanceName { get; set; } = "default-instance";
 
-    [NotNull]
     public Action<RebusConfigurer> Configurer {
         get => _configurer;
         set => _configurer = Check.NotNull(value, nameof(value));

framework/src/Volo.Abp.Mapperly/Volo/Abp/Mapperly/MapperlyAutoObjectMappingProvider.cs

@@ -24,6 +24,9 @@ public class MapperlyAutoObjectMappingProvider<TContext> : MapperlyAutoObjectMap
 public class MapperlyAutoObjectMappingProvider : IAutoObjectMappingProvider
 {
     protected static readonly ConcurrentDictionary<string, Func<object, object, object, object?>> MapCache = new();
+    protected static readonly List<MethodInfo> MapMethods = typeof(MapperlyAutoObjectMappingProvider)
+        .GetMethods(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic)
+        .Where(x => x.Name == nameof(Map)).ToList();
 
     protected IServiceProvider ServiceProvider { get; }
 
@@ -168,33 +171,9 @@ public class MapperlyAutoObjectMappingProvider : IAutoObjectMappingProvider
         Type destinationArgumentType,
         bool hasDestination)
     {
-        var methods = typeof(MapperlyAutoObjectMappingProvider)
-            .GetMethods(BindingFlags.Instance | BindingFlags.Public | BindingFlags.NonPublic)
-            .Where(x => x.Name == nameof(Map))
-            .Where(x =>
-            {
-                var parameters = x.GetParameters();
-                return (hasDestination || parameters.Length == 1) &&
-                       (!hasDestination || parameters.Length == 2);
-            })
-            .ToList();
-
-        if (methods.Count == 0)
-        {
-            throw new AbpException($"Could not find a method named '{nameof(Map)}'" +
-                                   $" with parameters({(hasDestination ? sourceArgumentType + ", " + destinationArgumentType : sourceArgumentType.ToString())})" +
-                                   $" in the type '{mapperType}'.");
-        }
-
-        if (methods.Count > 1)
-        {
-            throw new AbpException($"Found more than one method named '{nameof(Map)}'" +
-                                   $" with parameters({(hasDestination ? sourceArgumentType + ", " + destinationArgumentType : sourceArgumentType.ToString())})" +
-                                   $" in the type '{mapperType}'.");
-        }
-
-        var method = methods[0].MakeGenericMethod(sourceArgumentType, destinationArgumentType);
-
+        var method = !hasDestination
+            ? MapMethods.First(x => x.GetParameters().Length == 1).MakeGenericMethod(sourceArgumentType, destinationArgumentType)
+            : MapMethods.First(x => x.GetParameters().Length == 2).MakeGenericMethod(sourceArgumentType, destinationArgumentType);
         var instanceParam = Expression.Parameter(typeof(object), "mapper");
         var sourceParam = Expression.Parameter(typeof(object), "source");
         var destinationParam = Expression.Parameter(typeof(object), "destination");

framework/src/Volo.Abp.ObjectExtending/Volo/Abp/Data/HasExtraPropertiesExtensions.cs

@@ -26,34 +26,9 @@ public static class HasExtraPropertiesExtensions
 
     public static TProperty? GetProperty<TProperty>(this IHasExtraProperties source, string name, TProperty? defaultValue = default)
     {
-        var value = source.GetProperty(name);
-        if (value == null)
-        {
-            return defaultValue;
-        }
-
-        if (TypeHelper.IsPrimitiveExtended(typeof(TProperty), includeEnums: true))
-        {
-            var conversionType = typeof(TProperty);
-            if (TypeHelper.IsNullable(conversionType))
-            {
-                conversionType = conversionType.GetFirstGenericArgumentIfNullable();
-            }
-
-            if (conversionType == typeof(Guid))
-            {
-                return (TProperty)TypeDescriptor.GetConverter(conversionType).ConvertFromInvariantString(value.ToString()!)!;
-            }
-
-            if (conversionType.IsEnum)
-            {
-                return (TProperty)Enum.Parse(conversionType, value.ToString()!);
-            }
-
-            return (TProperty)Convert.ChangeType(value, conversionType, CultureInfo.InvariantCulture);
-        }
-
-        throw new AbpException("GetProperty<TProperty> does not support non-primitive types. Use non-generic GetProperty method and handle type casting manually.");
+        return TypeHelper.ChangeTypePrimitiveExtended<TProperty>(
+            source.GetProperty(name, (object?) defaultValue)
+        ) ?? defaultValue;
     }
 
     public static TSource SetProperty<TSource>(

framework/test/Volo.Abp.Ddd.Tests/Volo/Abp/Domain/Repositories/RepositoryRegistration_Tests.cs

@@ -408,6 +408,11 @@ public class RepositoryRegistration_Tests
     public class MyTestAggregateRootWithDefaultPkEmptyRepository : IMyTestAggregateRootWithDefaultPkEmptyRepository
     {
         public bool? IsChangeTrackingEnabled { get; set; }
+
+        public void SetEntityName(string name)
+        {
+            
+        }
     }
 
     public class TestDbContextRegistrationOptions : AbpCommonDbContextRegistrationOptions