From af424c485ee8073468b948fc2b2f80b74497c299 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <fahrican9978@gmail.com>
Date: Thu, 20 Nov 2025 11:11:10 +0300
Subject: [PATCH] Update tutorial for bookstore

Updated the tutorial to reference ABP v9.3.0 instead of v3.1.0, and revised instructions to use Angular's component-based routing instead of module-based routing. Adjusted code samples and explanations to reflect changes in Angular CLI output and route configuration.
---
 docs/en/tutorials/book-store/part-02.md | 58 +++++++------------------
 1 file changed, 15 insertions(+), 43 deletions(-)

diff --git a/docs/en/tutorials/book-store/part-02.md b/docs/en/tutorials/book-store/part-02.md
index 750808fe4d..50e3cf76c6 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', loadChildren: () => 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.