fix: grammatical issues

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

@@ -23,7 +23,7 @@ Open the `app.config.ts` and add `provideAccountConfig()` to the providers array
 // app.config.ts
 
 import { provideAccountConfig } from "@abp/ng.account/config";
-//...
+// ...
 
 export const appConfig: ApplicationConfig = {
   providers: [
@@ -60,10 +60,10 @@ npm install @volo/abp.ng.account
 
 Open the `app.config.ts` and add `provideAccountPublicConfig()` to the providers array as shown below:
 
-> 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.` when you try to access the account pages. Otherwise, you can skip adding the `provideAccountLayout()` 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 { provideAccountPublicConfig } from "@volo/abp.ng.account/public/config";
 // if you are using or want to use Lepton X, you should add provideAccountLayout

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

@@ -5,7 +5,7 @@ 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 component. 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:
 
@@ -23,7 +23,7 @@ import { TrackCapsLockDirective } from '@abp/ng.core'
       }
     </div>
   `,
-  imports: [ TrackCapsLockDirective ]
+  imports: [TrackCapsLockDirective]
 })
 export class SampleComponent{
   capsLock = false;

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

@@ -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
 
@@ -150,7 +150,7 @@ export const myDynamicLayouts = new Map<string, string>([...DEFAULT_DYNAMIC_LAYO
 
 #### 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:
 

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

@@ -17,7 +17,7 @@ class DemoComponent {
 }
 ```
 
-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
 

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

@@ -129,7 +129,7 @@ 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.config.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';

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 app configuration:
+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,7 +52,7 @@ 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 configuration and pass it to the static `createRoutes` method of `identity` routes 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.routes.ts

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 app configuration:
+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,7 +57,7 @@ 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 configuration and pass it to the static `createRoutes` method of `identity` package 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.routes.ts

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

@@ -5,7 +5,7 @@ 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, it should be imported in your component. The directive's selector is **`abpEllipsis`**. By adding the `abpEllipsis` attribute to an HTML element, you can activate the `EllipsisDirective` for the HTML element.
+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
 // ...

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 app configuration:
+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,7 +49,7 @@ 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 configuration and pass it to the static `configureRoutes` of `identity` package 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.routes.ts

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

@@ -54,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
 

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

@@ -6,7 +6,7 @@ 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 app configuration.
+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';
@@ -58,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 `provideAbpThemeShared` in your root app configuration. 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."

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

@@ -192,7 +192,7 @@ 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';
 

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

@@ -32,7 +32,7 @@ import { ModalComponent, ModalCloseDirective } from '@abp/ng.theme.shared';
   ],
 })
 export class SampleComponent {
-  isModalOpen = false
+  isModalOpen = false;
 }
 ```
 

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

@@ -14,7 +14,7 @@ In this example, we will add a "Click Me!" action and log `userName` of all user
 
 ### Step 1. Create Toolbar Action Contributors
 
-The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root app configuration:
+The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration:
 
 ```js
 // src/app/toolbar-action-contributors.ts
@@ -53,7 +53,7 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li
 
 ### Step 2. Import and Use Toolbar Action Contributors
 
-Import `identityToolbarActionContributors` in your routing module and pass it to the static `createRoutes` method of `identity` package as seen below:
+Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below:
 
 ```js
 // src/app/app.routes.ts
@@ -120,7 +120,7 @@ Here, `EXTENSIONS_ACTION_DATA` token provides us the context from the page toolb
 
 ### Step 2. Create Toolbar Action Contributors
 
-The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root app configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in:
+The following code prepares a constant named `identityToolbarActionContributors`, ready to be imported and used in your root application configuration. When `ToolbarComponent` is used instead of `ToolbarAction`, we can pass a component in:
 
 ```js
 // src/app/toolbar-action-contributors.ts
@@ -156,7 +156,7 @@ The list of actions, conveniently named as `actionList`, is a **doubly linked li
 
 ### Step 3. Import and Use Toolbar Action Contributors
 
-Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method of `identity` package as seen below.
+Import `identityToolbarActionContributors` in your routing configuration and pass it to the static `createRoutes` method for `identity` route as seen below.
 
 ```js
 // src/app/app.routes.ts

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

@@ -1,12 +1,12 @@
 # ABP Angular Quick Start
 
-**In this version ABP uses Angular [19.1.x](https://github.com/angular/angular/tree/17.3.x) version. You don't have to install Angular CLI globally**
+**In this version ABP uses Angular [20.0.x](https://github.com/angular/angular/tree/17.3.x) version. You don't have to install Angular CLI globally**
 
 ## How to Prepare Development Environment
 
 Please follow the steps below to prepare your development environment for Angular.
 
-1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js `v20.11+` installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system.
+1. **Install Node.js:** Please visit [Node.js downloads page](https://nodejs.org/en/download/) and download proper Node.js `v20.19+` installer for your OS. An alternative is to install [NVM](https://github.com/nvm-sh/nvm) and use it to have multiple versions of Node.js in your operating system.
 2. **[Optional] Install Yarn:** You may install Yarn v1.22+ (not v2) following the instructions on [the installation page](https://classic.yarnpkg.com/en/docs/install). Yarn v1 delivers an arguably better developer experience compared to npm v10 and below. You may skip this step and work with npm, which is built-in in Node.js, instead.
 3. **[Optional] Install VS Code:** [VS Code](https://code.visualstudio.com/) is a free, open-source IDE which works seamlessly with TypeScript. Although you can use any IDE including Visual Studio or Rider, VS Code will most likely deliver the best developer experience when it comes to Angular projects. ABP project templates even contain plugin recommendations for VS Code users, which VS Code will ask you to install when you open the Angular project folder. Here is a list of recommended extensions:
    - [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=angular.ng-template)

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

@@ -4,7 +4,7 @@ In password input, text can be shown easily via changing input type attribute to
 
 
 ## Getting Started
-`ShowPasswordDirective` is standalone. In order to use the `ShowPasswordDirective` in an HTML template, import it to your component:
+`ShowPasswordDirective` is standalone. In order to use the it in an HTML template, import it to your component:
 
 **Importing to Component**
 ```ts
@@ -37,7 +37,7 @@ import { ShowPasswordDirective } from '@abp/ng.core';
       <i (click)="showPassword = !showPassword">icon</i>
     </div>
   `,
-  imports: [ ShowPasswordDirective ]
+  imports: [ShowPasswordDirective]
 })
 export class SampleComponent{
   showPassword = false;

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

@@ -645,12 +645,14 @@ export const ORDER_SERVICE_ROUTES: Routes = [
 
 ```typescript
 import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
 import { OrderDto, OrderService } from './proxy/ordering-service/services';
 
 @Component({
   selector: 'lib-order',
   templateUrl: './order.component.html',
   styleUrl: './order.component.css'
+  imports: [CommonModule]
 })
 export class OrderComponent {