Tutorial for Angular is outdated #10268

4 Answer(s)

• 

  0

  AI-Bot created 8 hours ago

  Support Team ABP Agent

  1. Solution

  • The Angular Book Store tutorial you referenced is aligned with the current ABP Angular UI template (ABP v10), which is still NgModule-based, even though Angular itself now recommends standalone APIs for new apps.
  • That yarn ng generate module book --module app --routing --route books command and the module-based structure in the tutorial are therefore intentional and still correct for projects generated by ABP today.

  So, for an ABP v10 Angular project:

  • It is expected that:
    • You have AppModule, SharedModule, feature modules (like BookModule, AuthorModule, etc.).
    • You add new features using ng generate module ... and register routes in the generated routing modules.
  • The tutorial matches this structure and you should follow it as-is if you are using the standard ABP Angular template.

  If you specifically want to adopt standalone components in your ABP Angular application:

  • You can manually refactor the generated Angular app to standalone style, but:
    • This is not yet the default or documented pattern in ABP’s official Angular tutorials.
    • You’ll need to adapt the tutorial steps (routing, declarations, imports) yourself to match a standalone architecture.

  The docs and samples currently still reflect NgModule usage and are not yet updated to a fully standalone-first style; they are focused on matching the generated template rather than the latest Angular style guidance.

  2. Sources

  • Verified Book Store Angular tutorial:
    https://abp.io/docs/latest/tutorials/book-store/part-02?UI=NG&DB=EF
  • ABP Angular UI overview (shows current module-based structure):
    https://abp.io/docs/latest/ui/angular/overview

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  improwise created 8 hours ago

  Incorrect, the angular app generated by latest ABP Studio does not use NgModule.

  Save Cancel
• 

  0

  AI-Bot created 8 hours ago

  Support Team ABP Agent

  1. Solution

  You are correct for projects created with the latest ABP Studio: the generated Angular UI is now standalone-based (no AppModule, no feature NgModules), while the BookStore Angular tutorial you linked is still NgModule-based. So the tutorial is conceptually valid, but structurally outdated for the new template.

  To use the tutorial with your standalone Angular app, treat all “module” steps as feature + route steps, and translate them as follows:

  ---

  1. Creating the “Books” feature

  Tutorial says (example):

  yarn ng generate module book --module app --routing --route books
  

  For a standalone Angular ABP app, instead:

  yarn ng generate component books/book-list --standalone --flat=false
  

  This will create something like:

  // src/app/books/book-list/book-list.component.ts
  @Component({
    standalone: true,
    selector: 'app-book-list',
    templateUrl: './book-list.component.html',
    styleUrls: ['./book-list.component.scss'],
    imports: [
      CommonModule,
      // other Angular/ABP imports you need
    ],
  })
  export class BookListComponent { /* ... */ }
  

  You do not create a BookModule or BookRoutingModule.

  ---

  2. Registering the route

  In the tutorial, you would add the route into a feature routing module (e.g., book-routing.module.ts) and import that into AppModule.

  In the standalone app, you instead add a route to your top-level routes configuration, typically app.routes.ts (or similar):

  // src/app/app.routes.ts (or wherever your main routes are defined)
  import { Routes } from '@angular/router';
  import { BookListComponent } from './books/book-list/book-list.component';
  
  export const routes: Routes = [
    // existing routes...
  
    {
      path: 'books',
      component: BookListComponent,
    },
  ];
  

  Your main.ts should already use bootstrapApplication with provideRouter(routes), so you only need to modify the routes array.

  ---

  3. Where the tutorial says “import the module”

  Anywhere the tutorial says things like:

  Add BookModule to the imports of AppModule.

  In the standalone structure, the equivalent is:

  • Ensure the route is configured (as above).
  • Ensure any shared functionality that used to be in SharedModule is:
    • either imported directly into the standalone component via its imports: [...] array, or
    • provided globally in your bootstrapApplication call (e.g. via importProvidersFrom(...) in main.ts).

  Example (if you have a shared ABP Angular module):

  // main.ts
  bootstrapApplication(AppComponent, {
    providers: [
      provideRouter(routes),
      importProvidersFrom(AbpCoreModule, ThemeSharedModule /* etc. */),
    ],
  });
  

  Then your feature components can use those services/directives without NgModules.

  ---

  4. Backend and ABP-specific parts

  All backend-related parts of the BookStore tutorial (EF Core, application services, DTOs, permissions, etc.) are still correct and can be followed exactly:

  • Create the Book, Author entities, DbContext mappings.
  • Create application services and DTOs.
  • Expose them via controllers.
  • Consume them in Angular via the generated proxies (ng generate proxy or existing @proxy usage).

  On the Angular side, only adapt:

  • “Create module” → “Create standalone component(s) in a feature folder”.
  • “Add module to imports” → “Add route + import shared providers at bootstrap level or in component imports”.

  ---

  2. Sources

  • Verified tutorial (structure still module-based as you observed):
    https://abp.io/docs/latest/tutorials/book-store/part-02?UI=NG&DB=EF

  • Angular UI overview (general ABP Angular info; not yet reflecting every standalone detail):
    https://abp.io/docs/latest/framework/ui/angular/overview

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  improwise created 8 hours ago

  Tutorial is incorrect and needs to be updated.

  Save Cancel