Browse Source

Merge branch 'dev' into revert-23469-Disable-MapperlyAutoObjectMappingProvider

pull/23493/head
maliming 1 year ago
parent
commit
b2fd828663
No known key found for this signature in database GPG Key ID: A646B9CB645ECEA4
  1. 21
      Directory.Packages.props
  2. 3
      abp_io/AbpIoLocalization/AbpIoLocalization/Admin/Localization/Resources/en.json
  3. 16
      abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json
  4. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/1752664190317-min.jpeg
  5. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15941-min.jpg
  6. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15944-min.jpg
  7. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15947-min.jpg
  8. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15948-min.jpg
  9. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15949-min.jpg
  10. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15959-min.jpg
  11. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15963-min.jpg
  12. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15995-min.jpg
  13. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15996-min.jpg
  14. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15998-min.jpg
  15. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15999-min.jpg
  16. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_16011-min.jpg
  17. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_16012-min.jpg
  18. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/cover.png
  19. BIN
      docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/image-20250722203102576.png
  20. 79
      docs/en/Blog-Posts/2025-08-08 v9_3_Release_Stable/POST.md
  21. BIN
      docs/en/Blog-Posts/2025-08-08 v9_3_Release_Stable/cover-image.png
  22. BIN
      docs/en/Blog-Posts/2025-08-08 v9_3_Release_Stable/upgrade-abp-packages.png
  23. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-saas-tenants-page.png
  24. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-add-migration-select-dbcontext.png
  25. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-add-migration-set-name.png
  26. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-add-migration.png
  27. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-browse.png
  28. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-context-selection.png
  29. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-open-with-terminal.png
  30. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-solution-runner.png
  31. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/acme-tenant-screen.png
  32. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/added-product-entity-migration-main-context.png
  33. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/added-product-entity-migration-tenant-context.png
  34. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/builder-check-tenant-side.png
  35. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/dbcontext-factories.png
  36. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/dbmigrator-logs.png
  37. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/hybrid-database-multi-tenancy.png
  38. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/multi-tenancy-dbcontext-structure.png
  39. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-1.png
  40. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-2.png
  41. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-conn-string-1.png
  42. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-conn-string-2.png
  43. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/product-database-table.png
  44. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/separate-database.png
  45. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/separate-tenant-database-multi-tenancy.png
  46. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/separate-tenant-schema-option.png
  47. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/single-shared-database.png
  48. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/switch-host-side.png
  49. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/switch-tenant-dialog.png
  50. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/tenant-acme-name.png
  51. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/tenant-database.png
  52. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/user-login.png
  53. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/user-logout.png
  54. BIN
      docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/users-table-new-tenant.png
  55. 2
      docs/en/Community-Articles/2025-07-31-How-to-build-persistent-background-jobs-with-abp-framework-and-quartz/Post.md
  56. BIN
      docs/en/Community-Articles/2025-08-12-Integration-Services-Explained/integration-services.jpeg
  57. 138
      docs/en/Community-Articles/2025-08-12-Integration-Services-Explained/post.md
  58. BIN
      docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/0-cover.png
  59. BIN
      docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/1-pipeline-yaml.png
  60. BIN
      docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/3-release.png
  61. BIN
      docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/4-safe-deploy.png
  62. BIN
      docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/5-summarizing.png
  63. 83
      docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/POST.md
  64. 398
      docs/en/Community-Articles/2025-08-19-abp-now-supports-angular-standalone-applications/POST.md
  65. 213
      docs/en/Community-Articles/2025-08-25-App-Services-vs-Domain-Services/POST.md
  66. BIN
      docs/en/Community-Articles/2025-08-25-App-Services-vs-Domain-Services/cover.png
  67. 338
      docs/en/Community-Articles/2025-08-25-AutoMapper-Alternatives/AutoMapper-Alternatives.md
  68. BIN
      docs/en/Community-Articles/2025-08-25-AutoMapper-Alternatives/cover.png
  69. BIN
      docs/en/Community-Articles/2025-08-25-AutoMapper-Alternatives/mapster-mapperly-community-powers.png
  70. 174
      docs/en/Community-Articles/2025-08-27-Building-a-permission-based-authorization-system-for-net-core/POST.md
  71. BIN
      docs/en/Community-Articles/2025-08-27-Building-a-permission-based-authorization-system-for-net-core/cover-image.png
  72. BIN
      docs/en/Community-Articles/2025-08-27-Building-a-permission-based-authorization-system-for-net-core/permission-management-module.png
  73. 169
      docs/en/Community-Articles/2025-08-27-backcompat-rest-apis-ms-dotnet/article.md
  74. BIN
      docs/en/Community-Articles/2025-08-27-backcompat-rest-apis-ms-dotnet/cover.png
  75. 76
      docs/en/cli/index.md
  76. 84
      docs/en/docs-nav.json
  77. 10
      docs/en/framework/architecture/multi-tenancy/index.md
  78. 176
      docs/en/framework/infrastructure/object-to-object-mapping.md
  79. 71
      docs/en/framework/ui/angular/account-module.md
  80. 30
      docs/en/framework/ui/angular/authorization.md
  81. 5
      docs/en/framework/ui/angular/basic-theme.md
  82. 51
      docs/en/framework/ui/angular/caps-lock-directive.md
  83. 98
      docs/en/framework/ui/angular/card-component.md
  84. 36
      docs/en/framework/ui/angular/chart-component.md
  85. 141
      docs/en/framework/ui/angular/component-replacement.md
  86. 50
      docs/en/framework/ui/angular/config-state-service.md
  87. 25
      docs/en/framework/ui/angular/confirmation-service.md
  88. 16
      docs/en/framework/ui/angular/data-table-column-extensions.md
  89. 18
      docs/en/framework/ui/angular/dynamic-form-extensions.md
  90. 49
      docs/en/framework/ui/angular/ellipsis-directive.md
  91. 93
      docs/en/framework/ui/angular/entity-action-extensions.md
  92. 33
      docs/en/framework/ui/angular/entity-filters.md
  93. 26
      docs/en/framework/ui/angular/environment.md
  94. 4
      docs/en/framework/ui/angular/extensions-overall.md
  95. 41
      docs/en/framework/ui/angular/feature-libraries.md
  96. 62
      docs/en/framework/ui/angular/form-validation.md
  97. 59
      docs/en/framework/ui/angular/http-error-handling.md
  98. BIN
      docs/en/framework/ui/angular/images/quick-start---root-folder-structure.png
  99. BIN
      docs/en/framework/ui/angular/images/quick-start---source-folder-structure.png
  100. 1
      docs/en/framework/ui/angular/list-service.md

21
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" />
@ -46,7 +46,7 @@
<PackageVersion Include="Hangfire.AspNetCore" Version="1.8.18" />
<PackageVersion Include="Hangfire.SqlServer" Version="1.8.18" />
<PackageVersion Include="HtmlSanitizer" Version="9.0.884" />
<PackageVersion Include="IdentityModel" Version="7.0.0" />
<PackageVersion Include="Duende.IdentityModel" Version="7.1.0" />
<PackageVersion Include="IdentityServer4" Version="4.1.2" />
<PackageVersion Include="IdentityServer4.AspNetIdentity" Version="4.1.2" />
<PackageVersion Include="JetBrains.Annotations" Version="2024.3.0" />
@ -136,7 +136,7 @@
<PackageVersion Include="Oracle.EntityFrameworkCore" Version="9.23.80" />
<PackageVersion Include="Polly" Version="8.5.2" />
<PackageVersion Include="Polly.Extensions.Http" Version="3.0.0" />
<PackageVersion Include="Pomelo.EntityFrameworkCore.MySql" Version="9.0.0-rc.1.efcore.9.0.0" />
<PackageVersion Include="Pomelo.EntityFrameworkCore.MySql" Version="9.0.0" />
<PackageVersion Include="MySql.EntityFrameworkCore" Version="9.0.6" />
<PackageVersion Include="Quartz" Version="3.14.0" />
<PackageVersion Include="Quartz.Extensions.DependencyInjection" Version="3.14.0" />
@ -156,8 +156,8 @@
<PackageVersion Include="Serilog.Sinks.File" Version="7.0.0" />
<PackageVersion Include="SharpZipLib" Version="1.4.2" />
<PackageVersion Include="Shouldly" Version="4.3.0" />
<PackageVersion Include="SixLabors.ImageSharp" Version="3.1.8" />
<PackageVersion Include="SixLabors.ImageSharp.Drawing" Version="2.1.6" />
<PackageVersion Include="SixLabors.ImageSharp" Version="3.1.1" />
<PackageVersion Include="SixLabors.ImageSharp.Drawing" Version="2.1.7" />
<PackageVersion Include="SkiaSharp" Version="2.88.8" />
<PackageVersion Include="SkiaSharp.NativeAssets.Linux" Version="2.88.8" />
<PackageVersion Include="SkiaSharp.NativeAssets.macOS" Version="2.88.8" />
@ -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" />
@ -186,5 +186,6 @@
<PackageVersion Include="coverlet.collector" Version="6.0.4" />
<PackageVersion Include="ConfigureAwait.Fody" Version="3.3.2" />
<PackageVersion Include="Fody" Version="6.9.2" />
<PackageVersion Include="System.Management" Version="9.0.1"/>
</ItemGroup>
</Project>
</Project>

3
abp_io/AbpIoLocalization/AbpIoLocalization/Admin/Localization/Resources/en.json

@ -774,6 +774,7 @@
"Menu:TelemetryMenu": "Telemetry Reports",
"Menu:Studio": "Studio",
"Menu:Solutions": "Solutions",
"Menu:Users": "Users"
"Menu:Users": "Users",
"Menu:UserReports": "Users"
}
}

16
abp_io/AbpIoLocalization/AbpIoLocalization/Www/Localization/Resources/en.json

@ -910,6 +910,7 @@
"ProudToWorkWith": "Proud to Work With",
"JoinOurConsumers": "Join them and build amazing products fast.",
"AdditionalServicesExplanation": "Do you need additional or custom services? <strong>We and our partners can provide;</strong>",
"CustomLicense": "Custom License",
"CustomProjectDevelopment": "Custom Project Development",
"CustomProjectDevelopmentExplanation": "Dedicated developers for your custom projects.",
"PortingExistingProjects": "Porting Existing Projects",
@ -1897,6 +1898,19 @@
"SelectAnOption": "Select an option",
"MostPopular": "Most Popular",
"AnnouncmentsPageTitle": "ABP Community Announcements | Stay Updated with the Latest News",
"AnnouncmentsPageDescription": "Get the latest news, feature updates, release notes, and important announcements about the ABP framework and .NET ecosystem. Stay ahead with timely information directly from the ABP team."
"AnnouncmentsPageDescription": "Get the latest news, feature updates, release notes, and important announcements about the ABP framework and .NET ecosystem. Stay ahead with timely information directly from the ABP team.",
"CanIUseABPProductsOnMoreThanOneComputer": "Can I use ABP products on more than one computer?",
"ABPProductsOnMoreThanOneComputerExplanation": "Yes. Each developer can install the software on up to two machines. A third machine requires approval via email. When you stop using one of your computers, the system understands and automatically invalidates that computer from your paired computer list.",
"CanIShareTheLicensedABPCommercialProducts": "Can I share the licensed ABP commercial products publicly or make them open source?",
"ShareTheLicensedABPCommercialProductsExplanation": "No! Sharing or sublicensing a Commercial (PRO) ABP package is strictly prohibited.",
"AreSubscriptionRenewalsAutomatic": "Are subscription renewals automatic?",
"SubscriptionRenewalsAutomaticExplanation": "By default, no, the renewals are manual. On the other hand, when you purchase a new license and use the payment gateway 'Iyzico' with your credit card, you will see a checkbox called 'Automatic Renewal' in the purchase steps which allows ABP system automatically renew your license. When you check that checkbox, the auto-renewal process lets you renew your license without losing this discount, and your development will never be interrupted. ABP does not save your credit card information, but our payment gateway does secure savings. You can disable auto-renewal at any time by accessing your Organization Management page.",
"DoYouProvideSupportForThird-partyLibraries": "Do you provide support for third-party libraries?",
"ProvideSupportForThird-partyExplanation": "No. Support only covers ABP Framework, ABP commercial packages and products which have been created by Volosoft.",
"DoYouSupportCustomABPArchitectures": "Do you support custom ABP architectures?",
"SupportCustomABPArchitecturesExplanation": "No. Support is only provided for standard ABP solution structures. On the other hand, you can always get support for your custom needs with a paid consultancy from the ABP Team.",
"DoesABPCollectAnyPersonalOrTechnicalData": "Does ABP collect any personal or technical data?",
"ABPCollectAnyDataExplanation": "The software may collect information about you and your use of the software, and send that to Volosoft. Volosoft as the software and service provider may use this information to provide services and improve its products & services. You may opt-out of these scenarios, as described in the <a href=\"{0}\">EULA</a> under PRIVACY AND COLLECTION OF PERSONAL DATA topic .",
"InThisDocument": "In this document"
}
}

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/1752664190317-min.jpeg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 214 KiB

After

Width:  |  Height:  |  Size: 180 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15941-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 749 KiB

After

Width:  |  Height:  |  Size: 712 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15944-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 779 KiB

After

Width:  |  Height:  |  Size: 709 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15947-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 697 KiB

After

Width:  |  Height:  |  Size: 667 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15948-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 852 KiB

After

Width:  |  Height:  |  Size: 825 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15949-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 738 KiB

After

Width:  |  Height:  |  Size: 714 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15959-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 802 KiB

After

Width:  |  Height:  |  Size: 742 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15963-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 633 KiB

After

Width:  |  Height:  |  Size: 620 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15995-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15996-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15998-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_15999-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_16011-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/IMG_16012-min.jpg

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.2 MiB

After

Width:  |  Height:  |  Size: 2.1 MiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/cover.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 602 KiB

After

Width:  |  Height:  |  Size: 594 KiB

BIN
docs/en/Blog-Posts/2025-07-22-My-Impressionf-at-WeAreDevelopers/image-20250722203102576.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 78 KiB

After

Width:  |  Height:  |  Size: 44 KiB

79
docs/en/Blog-Posts/2025-08-08 v9_3_Release_Stable/POST.md

@ -0,0 +1,79 @@
# ABP.IO Platform 9.3 Final Has Been Released!
We are glad to announce that [ABP](https://abp.io/) 9.3 stable version has been released today.
## What's New With Version 9.3?
All the new features were explained in detail in the [9.3 RC Announcement Post](https://abp.io/community/announcements/announcing-abp-9-3-release-candidate-4dqgiryf), so there is no need to review them again. You can check it out for more details.
## Getting Started with 9.3
### Creating New Solutions
You can check the [Get Started page](https://abp.io/get-started) to see how to get started with ABP. You can either download [ABP Studio](https://abp.io/get-started#abp-studio-tab) (**recommended**, if you prefer a user-friendly GUI application - desktop application) or use the [ABP CLI](https://abp.io/docs/latest/cli) to create new solutions.
> **Note**: ABP Studio **v1.2.1** has been released with support for **ABP 9.3**. If you already have ABP Studio installed, update it to v1.2.1 (or later, if available) to create new applications targeting 9.3. ABP Studio checks for updates automatically and will prompt you in-app modal to update to the latest version, or you can download the latest installer from the [Studio](https://abp.io/studio) page. See the [upgrading guide](https://abp.io/docs/latest/studio/installation#upgrading) for details. After updating, the New Solution wizard will create applications with ABP 9.3 by default. You can check the [ABP Studio and ABP Startup Template Version Mappings](https://abp.io/docs/latest/studio/version-mapping) documentation to see the corresponding ABP versions for other versions of Studio.
### How to Upgrade an Existing Solution
You can upgrade your existing solutions with either ABP Studio or ABP CLI. In the following sections, both approaches are explained:
### Upgrading via ABP Studio
If you are already using the ABP Studio, you can upgrade it to the latest version. ABP Studio periodically checks for updates in the background, and when a new version of ABP Studio is available, you will be notified through a modal. Then, you can update it by confirming the opened modal. See [the documentation](https://abp.io/docs/latest/studio/installation#upgrading) for more info.
After upgrading the ABP Studio, then you can open your solution in the application, and simply click the **Upgrade ABP Packages** action button to instantly upgrade your solution:
![](upgrade-abp-packages.png)
### Upgrading via ABP CLI
Alternatively, you can upgrade your existing solution via ABP CLI. First, you need to install the ABP CLI or upgrade it to the latest version.
If you haven't installed it yet, you can run the following command:
```bash
dotnet tool install -g Volo.Abp.Studio.Cli
```
Or to update the existing CLI, you can run the following command:
```bash
dotnet tool update -g Volo.Abp.Studio.Cli
```
After installing/updating the ABP CLI, you can use the [`update` command](https://abp.io/docs/latest/CLI#update) to update all the ABP related NuGet and NPM packages in your solution as follows:
```bash
abp update
```
You can run this command in the root folder of your solution to update all ABP related packages.
## Migration Guides
There are a few breaking changes in this version that may affect your application. Please read the migration guide carefully, if you are upgrading from v9.2: [ABP Version 9.3 Migration Guide](https://abp.io/docs/9.3/release-info/migration-guides/abp-9-3)
## Community News
### New ABP Community Articles
As always, exciting articles have been contributed by the ABP community. I will highlight some of them here:
* [Fahri Gedik](https://abp.io/community/members/fahrigedik) has published 2 new articles:
* [A Modern Approach to Angular Dependency Injection using inject function](https://abp.io/community/articles/a-modern-approach-to-angular-dependency-injection-using-8np4o1ap)
* [Angular Application Builder: Transitioning from Webpack to Esbuild](https://abp.io/community/articles/angular-application-builder-transitioning-from-webpack-to-3yzhzfl0)
* [Benjamin Fadina](https://abp.io/community/members/benjaminsqlserver@gmail.com) has published several videos on various topics such as **Blazor Web Assembly Using ABP.IO**, **CQRS Implementation with MediatR in ABP** and more. You can see all his videos [here](https://abp.io/community/members/benjaminsqlserver@gmail.com).
* [Mansur Besleney](https://abp.io/community/members/mansur.besleney) has published [How to Build Persistent Background Jobs with ABP Framework and Quartz](https://abp.io/community/articles/how-to-build-persistent-background-jobs-with-abp-framework-n9aloh93)
* [Halil Ibrahim Kalkan](https://x.com/hibrahimkalkan) has published [Multitenancy with Separate Databases in .NET and ABP](https://abp.io/community/articles/multitenancy-with-separate-databases-in-dotnet-and-abp-51nvl4u9)
* [Alex Maiereanu](https://abp.io/community/members/alex.maiereanu@3sstudio.com) has published [ABP-Hangfire-AzurePostgreSQL](https://abp.io/community/articles/abphangfireazurepostgresql-s1jnf3yg)
* [Jack Fistelmann](https://abp.io/community/members/jfistelmann) has published [ABP and maildev](https://abp.io/community/articles/abp-and-maildev-gy13cr1p)
* [Harsh Gupta](https://abp.io/community/members/harshgupta) has published [How to Add a Module in the ABP.io Application?](https://abp.io/community/articles/how-to-add-a-module-in-the-abp.io-application-sdeajkn6)
* [Tarık Özdemir](https://abp.io/community/members/mtozdemir) has published [AI-First Architecture for .NET Projects: A Modern Blueprint Inspired by McKinsey](https://abp.io/community/articles/AI-First%20Architecture%20for%20.NET%20Projects%3A%20A%20Modern%20Blueprint-h2wgcoq3)
* [Liming Ma](https://github.com/maliming) has published [Using Hangfire Dashboard in ABP API Website](https://abp.io/community/articles/using-hangfire-dashboard-in-abp-api-website--r32ox497)
Thanks to the ABP Community for all the content they have published. You can also [post your ABP related (text or video) content](https://abp.io/community/posts/create) to the ABP Community.
## About the Next Version
The next feature version will be 10.0. You can follow the [release planning here](https://github.com/abpframework/abp/milestones). Please [submit an issue](https://github.com/abpframework/abp/issues/new) if you have any problems with this version.

BIN
docs/en/Blog-Posts/2025-08-08 v9_3_Release_Stable/cover-image.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 676 KiB

BIN
docs/en/Blog-Posts/2025-08-08 v9_3_Release_Stable/upgrade-abp-packages.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-saas-tenants-page.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 35 KiB

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-add-migration-select-dbcontext.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-add-migration-set-name.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-add-migration.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 41 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-browse.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 9.6 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-context-selection.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-open-with-terminal.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 40 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/abp-studio-solution-runner.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/acme-tenant-screen.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/added-product-entity-migration-main-context.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 8.5 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/added-product-entity-migration-tenant-context.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/builder-check-tenant-side.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 17 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/dbcontext-factories.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/dbmigrator-logs.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

After

Width:  |  Height:  |  Size: 62 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/hybrid-database-multi-tenancy.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/multi-tenancy-dbcontext-structure.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 28 KiB

After

Width:  |  Height:  |  Size: 16 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-conn-string-1.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 9.9 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/new-tenant-dialog-conn-string-2.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/product-database-table.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 25 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/separate-database.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.8 KiB

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/separate-tenant-database-multi-tenancy.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/separate-tenant-schema-option.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 70 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/single-shared-database.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 9.2 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/switch-host-side.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8.0 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/switch-tenant-dialog.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 8.6 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/tenant-acme-name.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.2 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/tenant-database.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/user-login.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 62 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/user-logout.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
docs/en/Community-Articles/2025-07-26-Separate-Tenant-Schema/users-table-new-tenant.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 27 KiB

2
docs/en/Community-Articles/2025-07-31-How-to-build-persistent-background-jobs-with-abp-framework-and-quartz/Post.md

@ -543,4 +543,6 @@ Complex background processing doesn't have to be complicated to implement. ABP's
Whether you're building subscription management, financial reporting, or data synchronization, these patterns provide a solid foundation for reliable, maintainable solutions.
You can reach sample project's source code from [here](https://github.com/MansurBesleney/MySaaSApplication)
**Happy coding, and may your background jobs never miss a beat!** 🚀

BIN
docs/en/Community-Articles/2025-08-12-Integration-Services-Explained/integration-services.jpeg

Binary file not shown.

After

Width:  |  Height:  |  Size: 126 KiB

138
docs/en/Community-Articles/2025-08-12-Integration-Services-Explained/post.md

@ -0,0 +1,138 @@
# Integration Services in ABP — What they are, when to use them, and how they behave 🚦
If you’ve been building with ABP for a while, you’ve probably used Application Services for your UI and APIs in your .NET and ASP.NET Core apps. Integration Services are similar—but with a different mission: they exist for service-to-service or module-to-module communication, not for end users.
If you want the formal spec, see the official doc: [Integration Services](../../framework/api-development/integration-services.md). This post is the practical, no-fluff guide.
## What is an Integration Service?
An Integration Service is an application service or ASP.NET Core MVC controller marked with the `[IntegrationService]` attribute. That marker tells ABP “this endpoint is for internal communication.”
- They are not exposed by default (safer for reusable modules and monoliths).
- When exposed, their route prefix is `/integration-api` (so you can easily protect them at your gateway or firewall).
- Auditing is disabled by default for them (less noise for machine-to-machine calls).
Quick look:
```csharp
[IntegrationService]
public interface IProductIntegrationService : IApplicationService
{
Task<List<ProductDto>> GetProductsByIdsAsync(List<Guid> ids);
}
public class ProductIntegrationService : ApplicationService, IProductIntegrationService
{
public Task<List<ProductDto>> GetProductsByIdsAsync(List<Guid> ids)
{
// fetch and return minimal product info for other services/modules
}
}
```
## Are they HTTP endpoints?
- By default: no (they won’t be reachable over HTTP in the ASP.NET Core routing pipeline).
- If you need them over HTTP (typically for microservices), explicitly enable:
```csharp
Configure<AbpAspNetCoreMvcOptions>(options =>
{
options.ExposeIntegrationServices = true;
});
```
Once exposed, ABP puts them under `/integration-api/...` instead of `/api/...` in the ASP.NET Core routing pipeline. That’s your hint to restrict them from public internet access.
## Enable auditing (optional)
If you want audit logs for integration calls, enable it explicitly:
```csharp
Configure<AbpAuditingOptions>(options =>
{
options.IsEnabledForIntegrationServices = true;
});
```
## When should you use Integration Services?
- Internal, synchronous operations between services or modules.
- You need a “thin” API designed for other services (not for UI): minimal DTOs, no view concerns, predictable contracts.
- You want to hide these endpoints from public clients, or only allow them inside your private network or k8s cluster.
- You’re packaging a reusable module that might be used in both monolith and microservice deployments.
## When NOT to use them
- Public APIs or anything intended for browsers/mobile apps → use regular application services/controllers.
- Asynchronous cross-service workflows → consider domain events + outbox/inbox; use Integration Services for sync calls.
- Complex, chatty UI endpoints → those belong to your external API surface, not internal integration.
## Common use-cases and examples
- Identity lookups across services: an Ordering service needs basic user info from the Identity service.
- Permission checks from another module: a CMS module asks a Permission service for access decisions.
- Product data hydrations: a Cart service needs minimal product details (price, name) from Catalog.
- Internal admin/maintenance operations that aren’t meant for end users but are needed by other services.
## Example: microservice-to-microservice call
1) Mark and expose the integration service in the target service:
```csharp
[IntegrationService]
public interface IUserIntegrationService : IApplicationService
{
Task<UserBriefDto?> FindByIdAsync(Guid id);
}
Configure<AbpAspNetCoreMvcOptions>(o => o.ExposeIntegrationServices = true);
```
2) In the caller service, add an HTTP client proxy only for Integration Services if you like to keep things clean:
```csharp
services.AddHttpClientProxies(
typeof(TargetServiceApplicationModule).Assembly,
remoteServiceConfigurationName: "TargetService",
asDefaultServices: true,
applicationServiceTypes: ApplicationServiceTypes.IntegrationServices);
```
3) Call it just like a local service (ABP’s HTTP proxy handles the wire):
```csharp
public class OrderAppService : ApplicationService
{
private readonly IUserIntegrationService _userIntegrationService;
public OrderAppService(IUserIntegrationService userIntegrationService)
{
_userIntegrationService = userIntegrationService;
}
public async Task PlaceOrderAsync(CreateOrderDto input)
{
var user = await _userIntegrationService.FindByIdAsync(CurrentUser.GetId());
// validate user status, continue placing order...
}
}
```
## Monolith vs. Microservices
- Monolith: keep them unexposed and call via DI in-process. You get the same clear contract with zero network overhead.
- Microservices: expose them and route behind your gateway. The `/integration-api` prefix makes it easy to firewall/gateway-restrict.
## Practical tips
- Keep integration DTOs lean and stable. These are machine contracts—don’t mix UI concerns.
- Name them clearly (e.g., `UserIntegrationService`) so intent is obvious.
- Guard your ASP.NET Core gateway application: block `/integration-api/*` from public traffic.
- Enable auditing only if you truly need the logs for these calls.
## Further reading
- Official docs: [Integration Services](../../framework/api-development/integration-services.md)
That’s it! Integration Services give you a clean, intentional way to design internal APIs—great in monoliths, essential in microservices.

BIN
docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/0-cover.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 MiB

BIN
docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/1-pipeline-yaml.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 377 KiB

BIN
docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/3-release.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

BIN
docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/4-safe-deploy.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

BIN
docs/en/Community-Articles/2025-08-19-Best-Practices-Azure-Devops/5-summarizing.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

83
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)
---

398
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!

213
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)

BIN
docs/en/Community-Articles/2025-08-25-App-Services-vs-Domain-Services/cover.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 638 KiB

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

@ -0,0 +1,338 @@
# 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) **(308 GitHub stars)**, [**ValueInjecter**](https://github.com/omuleanu/ValueInjecter) **(258 GitHub stars)**, [**AgileMapper**](https://github.com/agileobjects/AgileMapper) **(463 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 class Order
{
public int Id { get; set; }
public Customer Customer { get; set; } = default!;
public List<OrderLine> Lines { get; set; } = new();
public DateTime CreatedAt { get; set; }
}
public class Customer
{
public int Id { get; set; }
public string Name { get; set; } = "";
public string? Email { get; set; }
}
public class OrderLine
{
public int ProductId { get; set; }
public int Quantity { get; set; }
public decimal UnitPrice { get; set; }
}
public class OrderDto
{
public int Id { get; set; }
public string CustomerName { get; set; } = "";
public int ItemCount { get; set; }
public decimal Total { get; set; }
public string CreatedAtIso { get; set; } = "";
}
```
#### 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 source);
// Update an existing target (like MapToExisting)
[MapProperty(nameof(Order.Customer) + "." + nameof(Customer.Name), nameof(OrderDto.CustomerName))]
public partial void UpdateDto(Order source, OrderDto target);
public OrderDto Map(Order s)
{
var d = ToDto(s);
AfterMap(s, d);
return d;
}
public void Map(Order source, OrderDto d)
{
UpdateDto(source, d);
AfterMap(source, d);
}
private void AfterMap(Order source, OrderDto d)
{
d.ItemCount = source.Lines.Sum(l => l.Quantity);
d.Total = source.Lines.Sum(l => l.Quantity * l.UnitPrice);
d.CreatedAtIso = source.CreatedAt.ToString("O");
}
}
//USAGE
var mapper = new OrderMapper();
var order = new Order
{
Id = 1,
Customer = new Customer { Id = 1, Name = "John Doe", Email = "johndoe@abp.io" },
Lines =
[
new OrderLine {ProductId = 1, Quantity = 2, UnitPrice = 10.0m},
new OrderLine {ProductId = 2, Quantity = 1, UnitPrice = 20.0m}
]
};
// Map to a new object
var dto = mapper.Map(order);
// Map to an existing object
var target = new OrderDto();
mapper.Map(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.

BIN
docs/en/Community-Articles/2025-08-25-AutoMapper-Alternatives/cover.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 477 KiB

BIN
docs/en/Community-Articles/2025-08-25-AutoMapper-Alternatives/mapster-mapperly-community-powers.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 163 KiB

174
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).

BIN
docs/en/Community-Articles/2025-08-27-Building-a-permission-based-authorization-system-for-net-core/cover-image.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 324 KiB

BIN
docs/en/Community-Articles/2025-08-27-Building-a-permission-based-authorization-system-for-net-core/permission-management-module.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

169
docs/en/Community-Articles/2025-08-27-backcompat-rest-apis-ms-dotnet/article.md

@ -0,0 +1,169 @@
# Best Practices for Designing Backward‑Compatible REST APIs in a Microservice Solution for .NET Developers
## Introduction
With microservice architecture, each service develops and ships independently at its own pace, and clients infrequently update in lockstep. **Backward compatibility** means that when you release new versions, current consumers continue to function without changing code. This article provides a practical, 6–7 minute tutorial specific to **.NET developers**.
---
## What Counts as “Breaking”? (and what doesn’t)
A change is **breaking** if a client that previously conformed can **fail at compile time or runtime**, or exhibit **different business‑critical behavior**, **without** changing that client in any way. In other words: if an old client needs to be altered in order to continue functioning as it did, your change is breaking.
### Examples of breaking changes
- **Deleting or renaming an endpoint** or modifying its URL/route.
- **Making an existing field required** (e.g., requiring `address`).
- **Data type or format changes** (e.g., `price: string` → `price: number`, or date format changes).
- **Altering default behavior or ordering** that clients implicitly depend on (hidden contracts).
- **Changing the error model** or HTTP status codes in a manner that breaks pre-existing error handling.
- **Renaming fields** or **making optional fields required** in requests or responses.
- **Reinterpreting semantics** (e.g., `status="closed"` formerly included archived items, but no longer does).
### Examples of non‑breaking changes
- **Optional fields or query parameters can be added** (clients may disregard them).
- **Adding new enum values** (if the clients default to a safe behavior for unrecognized values).
- **Adding a new endpoint** while leaving the previous one unchanged.
- **Performance enhancements** that leave input/output unchanged.
- **Including metadata** (e.g., pagination links) without changing the current payload shape.
> Golden rule: **Old clients should continue to work exactly as they did before—without any changes.**
---
## Versioning Strategy
Versioning is your master control lever for managing change. Typical methods:
1) **URI Segment** (simplest)
```
GET /api/v1/orders
GET /api/v2/orders
```
Pros: Cache/gateway‑friendly; explicit in docs. Cons: URL noise.
2) **Header‑Based**
```
GET /api/orders
x-api-version: 2.0
```
Pros: Clean URLs; multiple reader support. Cons: Needs proxy/CDN rules.
3) **Media Type**
Accept: application/json;v=2
Pros: Semantically accurate. <br> Cons: More complicated to test and implement. <br> **Recommendation:** For the majority of teams, favor **URI segments**, with an optional **`x-api-version`** header for flexibility.
### Quick Setup in ASP.NET Core (Asp.Versioning)
```csharp
// Program.cs
using Asp.Versioning;
builder.Services.AddControllers();
builder.Services.AddApiVersioning(o =>
{
o.DefaultApiVersion = new ApiVersion(1, 0);
o.AssumeDefaultVersionWhenUnspecified = true;
o.ReportApiVersions = true; // response header: api-supported-versions
o.ApiVersionReader = ApiVersionReader.Combine(
new UrlSegmentApiVersionReader(),
new HeaderApiVersionReader("x-api-version")
);
});
builder.Services.AddVersionedApiExplorer(o =>
{
o.GroupNameFormat = "'v'VVV"; // v1, v2
o.SubstituteApiVersionInUrl = true;
});
```
```csharp
// Controller
using Asp.Versioning;
[ApiController]
[Route("api/v{version:apiVersion}/orders")]
public class OrdersController : ControllerBase
{
[HttpGet]
[ApiVersion("1.0", Deprecated = true)]
public IActionResult GetV1() => Ok(new { message = "v1" });
[HttpGet]
[MapToApiVersion("2.0")]
public IActionResult GetV2() => Ok(new { message = "v2", includes = new []{"items"} });
}
```
---
## Schema Evolution Playbook (JSON & DTO)
Obey the following rules for compatibility‑safe evolution:
- **Add‑only changes**: Favor adding **optional** fields; do not remove/rename fields.
- **Maintain defaults**: When the new field is disregarded, the old functionality must not change.
- **Enum extension**: Clients should handle unknown enum values gracefully (default behavior).
- **Deprecation pipeline**: Mark fields/endpoints as deprecated **at least one version** prior to removal and publicize extensively. - **Stability by contract**: Record any unspoken contracts (ordering, casing, formats) that clients depend on.
### Example: adding a non‑breaking field
```csharp
public record OrderDto(
Guid Id,
decimal Total,
string Currency,
string? SalesChannel // new, optional
);
```
---
## Compatibility‑Safe API Behaviors
- **Error model**: Use a standard structure (e.g., RFC 7807 `ProblemDetails`). Avoid ad‑hoc error shapes on a per-endpoint basis.
- **Versioning/Deprecation communication** through headers:
- `api-supported-versions: 1.0, 2.0`
- `Deprecation: true` (in deprecated endpoints)
- `Sunset: Wed, 01 Oct 2025 00:00:00 GMT` (planned deprecation date)
- **Idempotency**: Use an `Idempotency-Key` header for retry-safe POSTs.
- **Optimistic concurrency**: Utilize `ETag`/`If-Match` to prevent lost updates.
- **Pagination**: Prefer cursor tokens (`nextPageToken`) to protect clients from sorting/index changes.
- **Time**: Employ ISO‑8601 in UTC; record time‑zone semantics and rounding conventions.
---
## Rollout & Deprecation Policy
A good deprecation policy is **announce → coexist → remove**:
1) **Announce**: Release changelog, docs, and comms (mail/Slack) with v2 information and the sunset date.
2) **Coexist**: Operate v1 and v2 side by side. Employ gateway percentage routing for progressive cutover.
3) **Observability**: Monitor errors/latency/usage **by version**. When v1 traffic falls below ~5%, plan for removal. 4) **Remove**: Post sunset date, return **410 (Gone)** with a link to migration documentation.
**Canary & Blue‑Green**: Initialize v2 with a small traffic portion and compare error/latency budgets prior to scaling up.
---
## Contract & Compatibility Testing
- **Consumer‑Driven Contracts**: Write expectations using Pact.NET; verify at provider CI.
- **Golden files / snapshots**: Freeze representative JSON payloads and automatically detect regressions.
- **Version-specific smoke tests**: Maintain separate, minimal test suites for v1 and v2.
- **SemVer discipline**: Minor = backward‑compatible; Major = breaking (avoid when possible).
Minimal example (xUnit + snapshot style):
```csharp
[Fact]
public async Task Orders_v1_contract_should_match_snapshot()
{
var resp = await _client.GetStringAsync("/api/v1/orders");
Approvals.VerifyJson(resp); // snapshot comparison
}
```
---
## Tooling & Docs (for .NET)
- **Asp.Versioning (NuGet)**: API versioning + ApiExplorer integration.
- **Swashbuckle / NSwag**: Generate an OpenAPI definition **for every version** (`/swagger/v1/swagger.json`, `/swagger/v2/swagger.json`). Display both in Swagger UI.
- **Polly**: Client‑side retries/fallbacks to handle transient failures and ensure resilience.
- **Serilog + OpenTelemetry**: Collect metrics/logs/traces by version for observability and SLOs.
Swagger UI configuration by group name:
```csharp
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "API v1");
c.SwaggerEndpoint("/swagger/v2/swagger.json", "API v2");
});
```
---
## Conclusion
Backward compatibility is not a version number—it is **disciplined change management**. When you use add‑only schema evolution, a well‑defined versioning strategy, strict contract testing, and rolling rollout, you maintain microservice independence and safeguard consumer experience.

BIN
docs/en/Community-Articles/2025-08-27-backcompat-rest-apis-ms-dotnet/cover.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 755 KiB

76
docs/en/cli/index.md

@ -33,44 +33,44 @@ While each command may have a set of options, there are some global options that
Here, is the list of all available commands before explaining their details:
* **`help`**: Shows help on the usage of the ABP CLI.
* **`cli`**: Update or remove ABP CLI.
* **`new`**: Generates a new solution based on the ABP [startup templates](../solution-templates/index.md).
* **`new-module`**: Generates a new module based on the given template.
* **`new-package`**: Generates a new package based on the given template.
* **`update`**: Automatically updates all ABP related NuGet and NPM packages in a solution.
* **`clean`**: Deletes all `BIN` and `OBJ` folders in the current folder.
* **`add-package`**: Adds an ABP package to a project.
* **`add-package-ref`**: Adds package to given project.
* **`install-module`**: Adds a [multi-package application module](../modules/index.md) to a given module.
* **`install-local-module`**: Installs a local module to given module.
* **`list-modules`**: Lists names of application modules.
* **`list-templates`**: Lists the names of available templates to create a solution.
* **`get-source`**: Downloads the source code of a module.
* **`add-source-code`**: Downloads the source code and replaces package references with project references.
* **`init-solution`**: Creates ABP Studio configuration files for a given solution.
* **`kube-connect`**: Connects to kubernetes environment. (*Available for* ***Business*** *or higher licenses*)
* **`kube-intercept`**: Intercepts a service running in Kubernetes environment. (*Available for* ***Business*** *or higher licenses*)
* **`list-module-sources`**: Lists the remote module sources.
* **`add-module-source`**: Adds a remote module source.
* **`delete-module-source`**: Deletes a remote module source.
* **`generate-proxy`**: Generates client side proxies to use HTTP API endpoints.
* **`remove-proxy`**: Removes previously generated client side proxies.
* **`switch-to-preview`**: Switches to the latest preview version of the ABP.
* **`switch-to-nightly`**: Switches to the latest [nightly builds](../release-info/nightly-builds.md) of the ABP related packages on a solution.
* **`switch-to-stable`**: Switches to the latest stable versions of the ABP related packages on a solution.
* **`switch-to-local`**: Changes NuGet package references on a solution to local project references.
* **`upgrade`**: It converts the application to use pro modules.
* **`translate`**: Simplifies to translate localization files when you have multiple JSON [localization](../framework/fundamentals/localization.md) files in a source control repository.
* **`login`**: Authenticates on your computer with your [abp.io](https://abp.io/) username and password.
* **`login-info`**: Shows the current user's login information.
* **`logout`**: Logouts from your computer if you've authenticated before.
* **`bundle`**: Generates script and style references for ABP Blazor and MAUI Blazor project.
* **`install-libs`**: Install NPM Packages for MVC / Razor Pages and Blazor Server UI types.
* **`clear-download-cache`**: Clears the templates download cache.
* **`check-extensions`**: Checks the latest version of the ABP CLI extensions.
* **`install-old-cli`**: Installs old ABP CLI.
* **`generate-razor-page`**: Generates a page class that you can use it in the ASP NET Core pipeline to return an HTML page.
* **[`help`](../cli#help)**: Shows help on the usage of the ABP CLI.
* **[`cli`](../cli#cli)**: Update or remove ABP CLI.
* **[`new`](../cli#new)**: Generates a new solution based on the ABP [startup templates](../solution-templates/index.md).
* **[`new-module`](../cli#new-module)**: Generates a new module based on the given template.
* **[`new-package`](../cli#new-package)**: Generates a new package based on the given template.
* **[`update`](../cli#update)**: Automatically updates all ABP related NuGet and NPM packages in a solution.
* **[`clean`](../cli#clean)**: Deletes all `BIN` and `OBJ` folders in the current folder.
* **[`add-package`](../cli#add-package)**: Adds an ABP package to a project.
* **[`add-package-ref`](../cli#add-package-ref)**: Adds package to given project.
* **[`install-module`](../cli#install-module)**: Adds a [multi-package application module](../modules/index.md) to a given module.
* **[`install-local-module`](../cli#install-local-module)**: Installs a local module to given module.
* **[`list-modules`](../cli#list-modules)**: Lists names of application modules.
* **[`list-templates`](../cli#list-templates)**: Lists the names of available templates to create a solution.
* **[`get-source`](../cli#get-source)**: Downloads the source code of a module.
* **[`add-source-code`](../cli#add-source-code)**: Downloads the source code and replaces package references with project references.
* **[`init-solution`](../cli#init-solution)**: Creates ABP Studio configuration files for a given solution.
* **[`kube-connect`](../cli#kube-connect)**: Connects to kubernetes environment. (*Available for* ***Business*** *or higher licenses*)
* **[`kube-intercept`](../cli#kube-intercept)**: Intercepts a service running in Kubernetes environment. (*Available for* ***Business*** *or higher licenses*)
* **[`list-module-sources`](../cli#list-module-sources)**: Lists the remote module sources.
* **[`add-module-source`](../cli#add-module-source)**: Adds a remote module source.
* **[`delete-module-source`](../cli#delete-module-source)**: Deletes a remote module source.
* **[`generate-proxy`](../cli#generate-proxy)**: Generates client side proxies to use HTTP API endpoints.
* **[`remove-proxy`](../cli#remove-proxy)**: Removes previously generated client side proxies.
* **[`switch-to-preview`](../cli#switch-to-preview)**: Switches to the latest preview version of the ABP.
* **[`switch-to-nightly`](../cli#switch-to-nightly)**: Switches to the latest [nightly builds](../release-info/nightly-builds.md) of the ABP related packages on a solution.
* **[`switch-to-stable`](../cli#switch-to-stable)**: Switches to the latest stable versions of the ABP related packages on a solution.
* **[`switch-to-local`](../cli#switch-to-local)**: Changes NuGet package references on a solution to local project references.
* **[`upgrade`](../cli#upgrade)**: It converts the application to use pro modules.
* **[`translate`](../cli#translate)**: Simplifies to translate localization files when you have multiple JSON [localization](../framework/fundamentals/localization.md) files in a source control repository.
* **[`login`](../cli#login)**: Authenticates on your computer with your [abp.io](https://abp.io/) username and password.
* **[`login-info`](../cli#login-info)**: Shows the current user's login information.
* **[`logout`](../cli#logout)**: Logouts from your computer if you've authenticated before.
* **[`bundle`](../cli#bundle)**: Generates script and style references for ABP Blazor and MAUI Blazor project.
* **[`install-libs`](../cli#install-libs)**: Install NPM Packages for MVC / Razor Pages and Blazor Server UI types.
* **[`clear-download-cache`](../cli#clear-download-cache)**: Clears the templates download cache.
* **[`check-extensions`](../cli#check-extensions)**: Checks the latest version of the ABP CLI extensions.
* **[`install-old-cli`](../cli#install-old-cli)**: Installs old ABP CLI.
* **[`generate-razor-page`](../cli#generate-razor-page)**: Generates a page class that you can use it in the ASP NET Core pipeline to return an HTML page.
### help

84
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",

10
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:

176
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.
@ -320,6 +337,165 @@ var users = await _userRepository.GetListAsync(); // returns List<User>
var dtos = ObjectMapper.Map<List<User>, List<UserDto>>(users); // creates List<UserDto>
````
### Nested Mapping
When working with nested object mapping, there's an important limitation to be aware of. If you have separate mappers for nested types like in the example below, the parent mapper (`SourceTypeToDestinationTypeMapper`) will not automatically use the nested mapper (`SourceNestedTypeToDestinationNestedTypeMapper`) to handle the mapping of nested properties. This means that configurations like the `MapperIgnoreTarget` attribute on the nested mapper will be ignored during the parent mapping operation.
````csharp
public class SourceNestedType
{
public string Name { get; set; }
public string Ignored { get; set; }
}
public class SourceType
{
public string Name { get; set; }
public SourceNestedType Nested { get; set; }
}
public class DestinationNestedType
{
public string Name { get; set; }
public string Ignored { get; set; }
}
public class DestinationType
{
public string Name { get; set; }
public DestinationNestedType Nested { get; set; }
}
[Mapper]
public partial class SourceTypeToDestinationTypeMapper : MapperBase<SourceType, DestinationType>
{
public override partial DestinationType Map(SourceType source);
public override partial void Map(SourceType source, DestinationType destination);
}
[Mapper]
public partial class SourceNestedTypeToDestinationNestedTypeMapper : MapperBase<SourceNestedType, DestinationNestedType>
{
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public override partial DestinationNestedType Map(SourceNestedType source);
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public override partial void Map(SourceNestedType source, DestinationNestedType destination);
}
````
There are several ways to solve this nested mapping issue. Choose the approach that best fits your specific requirements:
#### Solution 1: Multi-Interface Implementation
Implement both mapping interfaces (`IAbpMapperlyMapper<SourceType, DestinationType>` and `IAbpMapperlyMapper<SourceNestedType, DestinationNestedType>`) in a single mapper class. This approach consolidates all related mapping logic into one class.
**Important:** Remember to implement `ITransientDependency` to register the mapper class with the dependency injection container.
````csharp
[Mapper]
public partial class SourceTypeToDestinationTypeMapper : IAbpMapperlyMapper<SourceType, DestinationType>, IAbpMapperlyMapper<SourceNestedType, DestinationNestedType>, ITransientDependency
{
public partial DestinationType Map(SourceType source);
public partial void Map(SourceType source, DestinationType destination);
public void BeforeMap(SourceType source)
{
}
public void AfterMap(SourceType source, DestinationType destination)
{
}
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public partial DestinationNestedType Map(SourceNestedType source);
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public partial void Map(SourceNestedType source, DestinationNestedType destination);
public void BeforeMap(SourceNestedType source)
{
}
public void AfterMap(SourceNestedType source, DestinationNestedType destination)
{
}
}
````
#### Solution 2: Consolidate Mapping Methods
Copy the nested mapping methods from `SourceNestedTypeToDestinationNestedTypeMapper` to the parent `SourceTypeToDestinationTypeMapper` class. This ensures all mapping logic is contained within a single mapper.
Example:
````csharp
[Mapper]
public partial class SourceTypeToDestinationTypeMapper : MapperBase<SourceType, DestinationType>
{
public override partial DestinationType Map(SourceType source);
public override partial void Map(SourceType source, DestinationType destination);
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public override partial DestinationNestedType Map(SourceNestedType source);
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public override partial void Map(SourceNestedType source, DestinationNestedType destination);
}
[Mapper]
public partial class SourceNestedTypeToDestinationNestedTypeMapper : MapperBase<SourceNestedType, DestinationNestedType>
{
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public override partial DestinationNestedType Map(SourceNestedType source);
[MapperIgnoreTarget(nameof(SourceNestedType.Ignored))]
public override partial void Map(SourceNestedType source, DestinationNestedType destination);
}
````
#### Solution 3: Dependency Injection Approach
Inject the nested mapper as a dependency into the parent mapper and use it in the `AfterMap` method to handle nested object mapping manually.
Example:
````csharp
[Mapper]
public partial class SourceTypeToDestinationTypeMapper : MapperBase<SourceType, DestinationType>
{
private readonly SourceNestedTypeToDestinationNestedTypeMapper _sourceNestedTypeToDestinationNestedTypeMapper;
public SourceTypeToDestinationTypeMapper(SourceNestedTypeToDestinationNestedTypeMapper sourceNestedTypeToDestinationNestedTypeMapper)
{
_sourceNestedTypeToDestinationNestedTypeMapper = sourceNestedTypeToDestinationNestedTypeMapper;
}
public override partial DestinationType Map(SourceType source);
public override partial void Map(SourceType source, DestinationType destination);
public override void AfterMap(SourceType source, DestinationType destination)
{
if (source.Nested != null)
{
destination.Nested = _sourceNestedTypeToDestinationNestedTypeMapper.Map(source.Nested);
}
}
}
````
#### Choosing the Right Solution
Each solution has its own advantages:
- **Solution 1** consolidates all mapping logic in one place and works well when mappings are tightly related.
- **Solution 2** is simple but can lead to code duplication if you need the nested mapper elsewhere.
- **Solution 3** maintains separation of concerns and reusability but requires manual mapping in the `AfterMap` method.
Choose the approach that best aligns with your application's architecture and maintainability requirements.
### More Mapperly Features
Most of Mapperly's features such as `Ignore` can be configured through its attributes. See the [Mapperly documentation](https://mapperly.riok.app/docs/intro/) for more details.

71
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]

30
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
])
}
```

5
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

51
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;
}
```

98
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:

36
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

141
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

50
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);
})

25
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

16
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(

18
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(

49
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`.

93
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

33
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.

26
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);
}
```

4
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

41
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.
---

62
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:

59
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:

BIN
docs/en/framework/ui/angular/images/quick-start---root-folder-structure.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 61 KiB

After

Width:  |  Height:  |  Size: 70 KiB

BIN
docs/en/framework/ui/angular/images/quick-start---source-folder-structure.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 77 KiB

After

Width:  |  Height:  |  Size: 73 KiB

1
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],

Some files were not shown because too many files changed in this diff

Loading…
Cancel
Save