diff --git a/docs/en/release-info/migration-guides/abp-10-6-angular-22.md b/docs/en/release-info/migration-guides/abp-10-6-angular-22.md index b5b07f71af..8da4026c96 100644 --- a/docs/en/release-info/migration-guides/abp-10-6-angular-22.md +++ b/docs/en/release-info/migration-guides/abp-10-6-angular-22.md @@ -1,7 +1,7 @@ ```json //[doc-seo] { - "Description": "Upgrade your ABP solutions to Angular version 22.0.x" + "Description": "Upgrade your ABP solutions to Angular version 22.0.x" } ``` @@ -13,11 +13,11 @@ This guide explains how to upgrade ABP Angular applications to **Angular 22** an Update all frontend dependencies together to maintain compatibility: -* `@angular/*` → `~22.0.0` -* `typescript` → `~6.0.0` -* `@abp/*` → corresponding ABP release version -* `@volo/*`, `@volosoft/*` (if applicable) → corresponding commercial release version -* `angular-oauth2-oidc` (if applicable) → `~22.0.0` +- `@angular/*` → `~22.0.0` +- `typescript` → `~6.0.0` +- `@abp/*` → corresponding ABP version (10.6) +- `@volo/*`, `@volosoft/*` (if applicable) → corresponding ABP version (10.6) +- `angular-oauth2-oidc` (if applicable) → `~22.0.0` Avoid mixing Angular 21 and Angular 22 packages within the same workspace. @@ -34,9 +34,9 @@ Before starting the upgrade: 1. Update package versions in `package.json`. 2. Run the Angular or Nx migration commands applicable to your project. 3. Remove existing installation artifacts: + - Delete `node_modules` + - Delete the lock file (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`) - * Delete `node_modules` - * Delete the lock file (`package-lock.json`, `yarn.lock`, or `pnpm-lock.yaml`) 4. Reinstall all dependencies. 5. Build the application and resolve any compilation or template errors. @@ -65,9 +65,9 @@ Angular 22 introduces updated change detection behavior for components that do n Common symptoms include: -* Loading indicators not updating -* Modal busy states not clearing -* Lists or charts not refreshing after asynchronous operations +- Loading indicators not updating +- Modal busy states not clearing +- Lists or charts not refreshing after asynchronous operations Recommended approaches: @@ -89,8 +89,8 @@ readonly data = toSignal( Update template bindings accordingly: -* `data.items` → `data().items` -* `data.totalCount` → `data().totalCount` +- `data.items` → `data().items` +- `data.totalCount` → `data().totalCount` ### 4.4 Modals and Loading States @@ -128,16 +128,16 @@ Resolve template typing issues where possible, or temporarily disable strict tem Common adjustments include: -* Updating optional chaining (`?.`) and null coalescing (`??`) usage -* Guarding optional form references before binding -* Resolving duplicate input or output bindings +- Updating optional chaining (`?.`) and null coalescing (`??`) usage +- Guarding optional form references before binding +- Resolving duplicate input or output bindings ### 4.6 Upload Progress Events Applications that rely on upload progress events should include the XHR backend in browser-side HTTP configuration: ```typescript -provideHttpClient(withFetch(), withXhr()) +provideHttpClient(withFetch(), withXhr()); ``` Do not enable the XHR backend in server-side rendering (SSR) bootstrap code. @@ -146,9 +146,9 @@ Do not enable the XHR backend in server-side rendering (SSR) bootstrap code. If charts do not update after asynchronous data loading: -* Store chart data in a signal -* Bind chart inputs using signal values (for example, `[data]="chartData()"`) -* Call `reinit()` after assigning new data rather than relying solely on `refresh()` +- Store chart data in a signal +- Bind chart inputs using signal values (for example, `[data]="chartData()"`) +- Call `reinit()` after assigning new data rather than relying solely on `refresh()` ## 5. Custom or Forked UI Modules @@ -162,15 +162,15 @@ If your project contains customized copies of ABP modules such as Identity, Tena After completing the upgrade, verify that: -* Dependencies are installed correctly without duplicate Angular versions -* The application builds successfully -* Unit tests pass (if applicable) -* Login, registration, and password recovery workflows function correctly -* CRUD list pages refresh as expected -* Modal loading and busy states behave correctly -* Permission and feature dialogs open and close correctly -* Upload progress events work as expected (if applicable) -* Dashboard charts render correctly after data is loaded +- Dependencies are installed correctly without duplicate Angular versions +- The application builds successfully +- Unit tests pass (if applicable) +- Login, registration, and password recovery workflows function correctly +- CRUD list pages refresh as expected +- Modal loading and busy states behave correctly +- Permission and feature dialogs open and close correctly +- Upload progress events work as expected (if applicable) +- Dashboard charts render correctly after data is loaded ## 7. Troubleshooting diff --git a/docs/en/release-info/release-notes.md b/docs/en/release-info/release-notes.md index 546d795ad1..1dc34341f0 100644 --- a/docs/en/release-info/release-notes.md +++ b/docs/en/release-info/release-notes.md @@ -20,7 +20,7 @@ See the detailed **[blog post / announcement](https://abp.io/community/announcem - Background Jobs: Dedicated Workers, Parallel Execution, and Successful Job Retention - API Definition and Proxy Improvements for Content Types and Multipart Uploads -- Angular UI: Upgrade to Angular 22 +- Angular UI: Angular has been upgraded to version 22. For a complete list of changes, including breaking changes, migration steps, and package updates, see the **[Angular Release Notes for v10.6](./../framework/ui/angular/release-notes/angular-22-typescript-6.md)**. - Antiforgery and OpenIddict Security Improvements - OpenIddict: Generate Access Token from the UI