From af424c485ee8073468b948fc2b2f80b74497c299 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Thu, 20 Nov 2025 11:11:10 +0300 Subject: [PATCH 1/5] 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. From 8ac2715c562a38f7357ef92d92aef3f8ea88520f Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Thu, 20 Nov 2025 11:31:22 +0300 Subject: [PATCH 2/5] Refactor BookComponent to use standalone imports on BookStore Tutorials --- docs/en/tutorials/book-store/part-03.md | 33 +++++-------------------- 1 file changed, 6 insertions(+), 27 deletions(-) diff --git a/docs/en/tutorials/book-store/part-03.md b/docs/en/tutorials/book-store/part-03.md index 546b4a743d..6b8112b59e 100644 --- a/docs/en/tutorials/book-store/part-03.md +++ b/docs/en/tutorials/book-store/part-03.md @@ -804,46 +804,25 @@ Also replace ` ` 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({ + standalone: true, 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 { From a4b62791f5f8459b0fbc073cda83eaf78a099ad1 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Thu, 20 Nov 2025 12:10:40 +0300 Subject: [PATCH 3/5] Update book route setup in tutorial documentation Replaces instructions for editing book-routing.module.ts with updated guidance for configuring routes in app.routes.ts, reflecting changes in Angular routing best practices. --- docs/en/tutorials/book-store/part-05.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) 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`. From 06157be3f40abad3518d56257cf6f28bee229c17 Mon Sep 17 00:00:00 2001 From: Fahri Gedik Date: Thu, 20 Nov 2025 12:48:16 +0300 Subject: [PATCH 4/5] Update author management tutorial for component-based setup Replaces instructions for creating an AuthorModule with steps for generating an AuthorComponent. Updates code samples and explanations to reflect the use of a standalone component with NgbDatepickerModule, aligning the tutorial with current Angular best practices. --- docs/en/tutorials/book-store/part-09.md | 32 ++++++++++--------------- 1 file changed, 13 insertions(+), 19 deletions(-) diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md index c30b018494..3839f319b2 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 From e468439bf8a849fd2c66e74c17e2034b92da1e59 Mon Sep 17 00:00:00 2001 From: sumeyye Date: Thu, 20 Nov 2025 16:12:30 +0300 Subject: [PATCH 5/5] update: small fixes for the migration --- docs/en/tutorials/book-store/part-02.md | 4 ++-- docs/en/tutorials/book-store/part-03.md | 11 +++++++---- docs/en/tutorials/book-store/part-09.md | 4 ++-- docs/en/tutorials/book-store/part-10.md | 10 ++++++---- 4 files changed, 17 insertions(+), 12 deletions(-) diff --git a/docs/en/tutorials/book-store/part-02.md b/docs/en/tutorials/book-store/part-02.md index 50e3cf76c6..1fe21c2848 100644 --- a/docs/en/tutorials/book-store/part-02.md +++ b/docs/en/tutorials/book-store/part-02.md @@ -357,7 +357,7 @@ The generated code places the new route definition to the `src/app/app.routes.ts ````js export const routes: Routes = [ // other route definitions... - { path : 'books', loadChildren: () => import('./book/book.component').then(c => c.BookComponent) }, + { path : 'books', loadComponent: () => import('./book/book.component').then(c => c.BookComponent) }, ]; ```` @@ -469,7 +469,7 @@ Open the `/src/app/book/book.component.html` and replace the content as shown be
- + {%{{{ '::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 6b8112b59e..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 ` ` with the following code part: @@ -765,7 +765,11 @@ Open `/src/app/book/book.component.html` and replace ` Type *
@@ -815,7 +819,6 @@ import { NgbDateNativeAdapter, NgbDateAdapter, NgbDatepickerModule } from '@ng-b import { ThemeSharedModule } from '@abp/ng.theme.shared'; @Component({ - standalone: true, selector: 'app-book', templateUrl: './book.component.html', styleUrls: ['./book.component.scss'], diff --git a/docs/en/tutorials/book-store/part-09.md b/docs/en/tutorials/book-store/part-09.md index 3839f319b2..b70fd3e875 100644 --- a/docs/en/tutorials/book-store/part-09.md +++ b/docs/en/tutorials/book-store/part-09.md @@ -747,13 +747,13 @@ Open the `/src/app/author/author.component.html` and replace the content as belo - + {%{{{ row.birthDate | date }}}%} - + 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" -> +/> ```` 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 * ````