diff --git a/docs/en/tutorials/book-store/part-02.md b/docs/en/tutorials/book-store/part-02.md
index 750808fe4d..1fe21c2848 100644
--- a/docs/en/tutorials/book-store/part-02.md
+++ b/docs/en/tutorials/book-store/part-02.md
@@ -315,7 +315,7 @@ This is a fully working, server side paged, sorted and localized table of books.
 
 ## Install NPM packages
 
-> Notice: This tutorial is based on the ABP v3.1.0+ If your project version is older, then please upgrade your solution. Check the [migration guide](../../framework/ui/angular/migration-guide-v3.md) if you are upgrading an existing project with v2.x.
+> Notice: This tutorial is based on the ABP v9.3.0+ If your project version is older, then please upgrade your solution. Check the [migration guide](../../framework/ui/angular/migration-guide-v3.md) if you are upgrading an existing project with v2.x.
 
 If you haven't done it before, open a new command line interface (terminal window) and go to your `angular` folder and then run the `yarn` command to install the NPM packages:
 
@@ -330,69 +330,42 @@ It's time to create something visible and usable! There are some tools that we w
 - [Ng Bootstrap](https://ng-bootstrap.github.io/#/home) will be used as the UI component library.
 - [Ngx-Datatable](https://swimlane.gitbook.io/ngx-datatable/) will be used as the datatable library.
 
-Run the following command line to create a new module, named `BookModule` in the root folder of the angular application:
+Run the following command line to create a new component, named `BookComponent` in the root folder of the angular application:
 
 ```bash
-yarn ng generate module book --module app --routing --route books
+yarn ng generate component book
 ```
 
 This command should produce the following output:
 
 ````bash
-> yarn ng generate module book --module app --routing --route books
-
-yarn run v1.19.1
-$ ng generate module book --module app --routing --route books
-CREATE src/app/book/book-routing.module.ts (336 bytes)
-CREATE src/app/book/book.module.ts (335 bytes)
-CREATE src/app/book/book.component.html (19 bytes)
-CREATE src/app/book/book.component.spec.ts (614 bytes)
-CREATE src/app/book/book.component.ts (268 bytes)
+> yarn ng generate component book
+
+yarn run v1.22.22
+$ ng generate component book
+CREATE src/app/book/book.component.spec.ts (537 bytes)
+CREATE src/app/book/book.component.ts (189 bytes)
 CREATE src/app/book/book.component.scss (0 bytes)
-UPDATE src/app/app-routing.module.ts (1289 bytes)
+CREATE src/app/book/book.component.html (20 bytes)
 Done in 3.88s.
 ````
 
-### BookModule
-
-Open the `/src/app/book/book.module.ts` and replace the content as shown below:
-
-````js
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-import { BookRoutingModule } from './book-routing.module';
-import { BookComponent } from './book.component';
-
-@NgModule({
-  declarations: [BookComponent],
-  imports: [
-    BookRoutingModule,
-    SharedModule
-  ]
-})
-export class BookModule { }
-
-````
-
-* Added the `SharedModule`. `SharedModule` exports some common modules needed to create user interfaces.
-* `SharedModule` already exports the `CommonModule`, so we've removed the `CommonModule`.
-
 ### Routing
 
-The generated code places the new route definition to the `src/app/app-routing.module.ts` file as shown below:
+The generated code places the new route definition to the `src/app/app.routes.ts` file as shown below:
 
 ````js
-const routes: Routes = [
+export const routes: Routes = [
   // other route definitions...
-  { path: 'books', loadChildren: () => import('./book/book.module').then(m => m.BookModule) },
+  { path : 'books', loadComponent: () => import('./book/book.component').then(c => c.BookComponent) },
 ];
 ````
 
 Now, open the `src/app/route.provider.ts` file and replace the `configureRoutes` function declaration as shown below:
 
 ```js
-function configureRoutes(routes: RoutesService) {
-  return () => {
+function configureRoutes() {
+    const routes = inject(RoutesService);
     routes.add([
       {
         path: '/',
@@ -416,7 +389,6 @@ function configureRoutes(routes: RoutesService) {
       },
     ]);
   };
-}
 ```
 
 `RoutesService` is a service provided by the ABP to configure the main menu and the routes.
@@ -497,7 +469,7 @@ Open the `/src/app/book/book.component.html` and replace the content as shown be
   </div>
   <div class="card-body">
     <ngx-datatable [rows]="book.items" [count]="book.totalCount" [list]="list" default>
-      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
+      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name" />
       <ngx-datatable-column [name]="'::Type' | abpLocalization" prop="type">
         <ng-template let-row="row" ngx-datatable-cell-template>
           {%{{{ '::Enum:BookType.' + row.type | abpLocalization }}}%}
diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md
index 546b4a743d..a2bac2110e 100644
--- a/docs/en/tutorials/book-store/part-03.md
+++ b/docs/en/tutorials/book-store/part-03.md
@@ -742,8 +742,8 @@ export class BookComponent implements OnInit {
 * Imported `FormGroup`, `FormBuilder` and `Validators` from `@angular/forms`.
 * Added a `form: FormGroup` property.
 * Added a `bookTypes` property as a list of `BookType` enum members. That will be used in form options.
-* Injected with the `FormBuilder` inject function.. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate needed to build complex forms.
-* Added a `buildForm` method to the end of the file and executed  the `buildForm()` in the `createBook` method.
+* Injected the `FormBuilder` with the inject function. [FormBuilder](https://angular.io/api/forms/FormBuilder) provides convenient methods for generating form controls. It reduces the amount of boilerplate that is needed to build complex forms.
+* Added a `buildForm` method at the end of the file and executed  the `buildForm()` in the `createBook` method.
 * Added a `save` method.
 
 Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </ng-template>`  with the following code part:
@@ -765,7 +765,11 @@ Open `/src/app/book/book.component.html` and replace `<ng-template #abpBody> </n
       <label for="book-type">Type</label><span> * </span>
       <select class="form-control" id="book-type" formControlName="type">
         <option [ngValue]="null">Select a book type</option>
-        <option [ngValue]="type.value" *ngFor="let type of bookTypes"> {%{{{ '::Enum:BookType.' + type.value | abpLocalization }}}%}</option>
+        @for (type of bookTypes; track type) {
+          <option [ngValue]="type.value"> 
+            {%{{{ '::Enum:BookType.' + type.value | abpLocalization }}}%}
+          </option>
+        }
       </select>
     </div>
 
@@ -804,46 +808,24 @@ Also replace `<ng-template #abpFooter> </ng-template>` with the following code p
 
 We've used [NgBootstrap datepicker](https://ng-bootstrap.github.io/#/components/datepicker/overview) in this component. So, we need to arrange the dependencies related to this component.
 
-Open `/src/app/book/book.module.ts` and replace the content as below:
-
-```js
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-import { BookRoutingModule } from './book-routing.module';
-import { BookComponent } from './book.component';
-import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap'; // add this line
-
-@NgModule({
-  declarations: [BookComponent],
-  imports: [
-    BookRoutingModule,
-    SharedModule,
-    NgbDatepickerModule, // add this line
-  ]
-})
-export class BookModule { }
-```
-
-* We imported `NgbDatepickerModule`  to be able to use the date picker.
-
 Open `/src/app/book/book.component.ts` and replace the content as below:
 
 ```js
 import { ListService, PagedResultDto } from '@abp/ng.core';
 import { Component, OnInit, inject } from '@angular/core';
 import { BookService, BookDto, bookTypeOptions } from '@proxy/books';
-import { FormGroup, FormBuilder, Validators } from '@angular/forms';
-
-// added this line
-import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';
+import { FormGroup, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { NgbDateNativeAdapter, NgbDateAdapter, NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
 
 @Component({
   selector: 'app-book',
   templateUrl: './book.component.html',
   styleUrls: ['./book.component.scss'],
+  imports: [ThemeSharedModule, ReactiveFormsModule, NgbDatepickerModule],
   providers: [
     ListService,
-    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter } // add this line
+    { provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }
   ],
 })
 export class BookComponent implements OnInit {
diff --git a/docs/en/tutorials/book-store/part-05.md b/docs/en/tutorials/book-store/part-05.md
index b7b05103c9..3db00ea423 100644
--- a/docs/en/tutorials/book-store/part-05.md
+++ b/docs/en/tutorials/book-store/part-05.md
@@ -311,23 +311,19 @@ We've only added the `.RequirePermissions(BookStorePermissions.Books.Default)` e
 
 First step of the UI is to prevent unauthorized users to see the "Books" menu item and enter to the book management page.
 
-Open the `/src/app/book/book-routing.module.ts` and replace with the following content:
+Open the `/src/app/app.routes.ts` and replace with the following content:
 
 ````js
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
 import { authGuard, permissionGuard } from '@abp/ng.core';
 import { BookComponent } from './book.component';
 
 const routes: Routes = [
-  { path: '', component: BookComponent, canActivate: [authGuard, permissionGuard] },
+{ 
+    path: 'books', 
+    loadComponent: () => import('./book/book.component').then(c => BookComponent),
+    canActivate: [authGuard, permissionGuard],
+},
 ];
-
-@NgModule({
-  imports: [RouterModule.forChild(routes)],
-  exports: [RouterModule],
-})
-export class BookRoutingModule {}
 ````
 
 * Imported `authGuard` and `permissionGuard` from the `@abp/ng.core`.
diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md
index c30b018494..b70fd3e875 100644
--- a/docs/en/tutorials/book-store/part-09.md
+++ b/docs/en/tutorials/book-store/part-09.md
@@ -477,49 +477,43 @@ That's all! You can run the application and try to edit an author.
 
 ## The Author Management Page
 
-Run the following command line to create a new module, named `AuthorModule` in the root folder of the angular application:
+Run the following command line to create a new component, named `AuthorComponent` in the root folder of the angular application:
 
 ```bash
-yarn ng generate module author --module app --routing --route authors
+yarn ng generate component author
 ```
 
 This command should produce the following output:
 
 ```bash
-> yarn ng generate module author --module app --routing --route authors
+> yarn ng generate component author
 
 yarn run v1.19.1
-$ ng generate module author --module app --routing --route authors
-CREATE src/app/author/author-routing.module.ts (344 bytes)
-CREATE src/app/author/author.module.ts (349 bytes)
+$ yarn ng generate component author
 CREATE src/app/author/author.component.html (21 bytes)
 CREATE src/app/author/author.component.spec.ts (628 bytes)
 CREATE src/app/author/author.component.ts (276 bytes)
 CREATE src/app/author/author.component.scss (0 bytes)
-UPDATE src/app/app-routing.module.ts (1396 bytes)
 Done in 2.22s.
 ```
 
-### AuthorModule
+### Author Component
 
-Open the `/src/app/author/author.module.ts` and replace the content as shown below:
+Open the `/src/app/author/author.component.ts` and replace the content as shown below:
 
 ```js
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../shared/shared.module';
-import { AuthorRoutingModule } from './author-routing.module';
-import { AuthorComponent } from './author.component';
+import { Component } from '@angular/core';
 import { NgbDatepickerModule } from '@ng-bootstrap/ng-bootstrap';
 
-@NgModule({
-  declarations: [AuthorComponent],
-  imports: [SharedModule, AuthorRoutingModule, NgbDatepickerModule],
+@Component({
+  selector: 'app-author',
+  templateUrl: './author.component.html',
+  styleUrls: ['./author.component.scss'],
+  imports: [NgbDatepickerModule],
 })
-export class AuthorModule {}
+export class AuthorComponent {}
 ```
 
-- Added the `SharedModule`. `SharedModule` exports some common modules needed to create user interfaces.
-- `SharedModule` already exports the `CommonModule`, so we've removed the `CommonModule`.
 - Added `NgbDatepickerModule` that will be used later on the author create and edit forms.
 
 ### Menu Definition
@@ -753,13 +747,13 @@ Open the `/src/app/author/author.component.html` and replace the content as belo
           </div>
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name"></ngx-datatable-column>
+      <ngx-datatable-column [name]="'::Name' | abpLocalization" prop="name" />
       <ngx-datatable-column [name]="'::BirthDate' | abpLocalization">
         <ng-template let-row="row" ngx-datatable-cell-template>
           {%{{{ row.birthDate | date }}}%}
         </ng-template>
       </ngx-datatable-column>
-      <ngx-datatable-column [name]="'::ShortBio' | abpLocalization" prop="shortBio"></ngx-datatable-column>
+      <ngx-datatable-column [name]="'::ShortBio' | abpLocalization" prop="shortBio" />
     </ngx-datatable>
   </div>
 </div>
diff --git a/docs/en/tutorials/book-store/part-10.md b/docs/en/tutorials/book-store/part-10.md
index 5e0235ad14..e03ada5a96 100644
--- a/docs/en/tutorials/book-store/part-10.md
+++ b/docs/en/tutorials/book-store/part-10.md
@@ -970,7 +970,7 @@ Book list page change is trivial. Open the `/src/app/book/book.component.html` a
   [name]="'::Author' | abpLocalization"
   prop="authorName"
   [sortable]="false"
-></ngx-datatable-column>
+/>
 ````
 
 When you run the application, you can see the *Author* column on the table:
@@ -1098,9 +1098,11 @@ Open the `/src/app/book/book.component.html` and add the following form group ju
   <label for="author-id">Author</label><span> * </span>
   <select class="form-control" id="author-id" formControlName="authorId">
     <option [ngValue]="null">Select author</option>
-    <option [ngValue]="author.id" *ngFor="let author of authors$ | async">
-      {%{{{ author.name }}}%}
-    </option>
+    @for (author of authors$ | async; track author) {
+      <option [ngValue]="author.id">
+        {%{{{ author.name }}}%}
+      </option>
+    }
   </select>
 </div>
 ````