Angular module is not loading (using your boilerplate template) #10279

5 Answer(s)

• 

  0

  AI-Bot created yesterday

  Support Team ABP Agent

  1. Solution

  The problem is purely on the Angular side:
  you have a menu item pointing to /rag-engine, but there is no Angular route that matches this path, so the app falls back to the built‑in 404 page.

  You already have RagEngineComponent in a separate Angular library (projects/rag-engine/...). Now you must expose it via routing and connect that route to your main app.

  Below are two concrete ways, depending on whether your app uses standalone routing (app.routes.ts) or module routing (app-routing.module.ts).

  ---

  A. If your app uses standalone routing (app.routes.ts)

  1. Create a route file for RagEngine

  In angular/src/app/rag-engine/rag-engine.routes.ts:

  import { Routes } from '@angular/router';
  import { authGuard, permissionGuard } from '@abp/ng.core';
  
  export const RAG_ENGINE_ROUTES: Routes = [
    {
      path: '',
      loadComponent: () =>
        import('../../projects/rag-engine/src/lib/components/rag-engine.component')
          .then(c => c.RagEngineComponent),
      canActivate: [authGuard, permissionGuard],
      // optional, if you want permission:
      // data: { requiredPolicy: 'RagEngine.RagEngine' },
    },
  ];
  

  2. Register it in app.routes.ts

  In angular/src/app/app.routes.ts:

  import { Routes } from '@angular/router';
  import { RAG_ENGINE_ROUTES } from './rag-engine/rag-engine.routes';
  
  export const APP_ROUTES: Routes = [
    {
      path: '',
      pathMatch: 'full',
      loadComponent: () =>
        import('./home/home.component').then(m => m.HomeComponent),
    },
    // ... other routes ...
  
    // >>> Add this block <<<
    {
      path: 'rag-engine',
      children: RAG_ENGINE_ROUTES,
    },
  ];
  

  3. Make sure the menu path matches

  Where you added the menu item (usually route.provider.ts or wherever you create the main menu entry), ensure the path is exactly /rag-engine:

  {
    path: '/rag-engine',
    name: '::Menu:RagEngine',
    iconClass: 'fa fa-database',
    layout: eLayoutType.application,
    // requiredPolicy: 'RagEngine.RagEngine', // if you added a policy
  }
  

  Now clicking RagEngine should route to RagEngineComponent instead of the 404 page.

  ---

  B. If your app uses module-based routing (app-routing.module.ts)

  If your Angular app still has AppModule and app-routing.module.ts:

  1. Add routing to the RagEngine library

  Inside projects/rag-engine/src/lib/rag-engine-routing.module.ts:

  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import { RagEngineComponent } from './components/rag-engine.component';
  import { AuthGuard, PermissionGuard } from '@abp/ng.core';
  
  const routes: Routes = [
    {
      path: '',
      component: RagEngineComponent,
      canActivate: [AuthGuard, PermissionGuard],
      // data: { requiredPolicy: 'RagEngine.RagEngine' },
    },
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
  })
  export class RagEngineRoutingModule {}
  

  And in projects/rag-engine/src/lib/rag-engine.module.ts (if not already):

  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RagEngineComponent } from './components/rag-engine.component';
  import { RagEngineRoutingModule } from './rag-engine-routing.module';
  
  @NgModule({
    declarations: [RagEngineComponent],
    imports: [
      CommonModule,
      RagEngineRoutingModule,
    ],
  })
  export class RagEngineModule {}
  

  2. Lazy‑load the module from the main app

  In angular/src/app/app-routing.module.ts:

  const routes: Routes = [
    {
      path: '',
      pathMatch: 'full',
      loadChildren: () =>
        import('./home/home.module').then(m => m.HomeModule),
    },
    // ... other routes ...
  
    // >>> Add this block <<<
    {
      path: 'rag-engine',
      loadChildren: () =>
        import('rag-engine').then(m => m.RagEngineModule),
      // or, if you created it under src/app/rag-engine:
      // loadChildren: () =>
      //   import('./rag-engine/rag-engine.module').then(m => m.RagEngineModule),
    },
  ];
  

  3. Keep the menu path as /rag-engine, same as in section A.

  ---

  C. Quick checklist to verify

  • [ ] RagEngineComponent builds without errors.
  • [ ] APP_ROUTES or routes array has an entry for path 'rag-engine'.
  • [ ] Your menu item uses path: '/rag-engine'.
  • [ ] If you use permissions, the current user has the required policy (or remove requiredPolicy while testing).

  After these changes, run from the angular folder:

  yarn        # or npm install
  yarn start  # or npm start
  

  Then click the RagEngine menu item; it should load your component instead of 404.

  ---

  2. Sources

  • ABP Angular quick start and routing patterns
    https://docs.abp.io/en/abp/latest/UI/Angular/Quick-Start

  • Community article showing adding a lazily loaded Angular module and registering route in app-routing.module.ts
    https://abp.io/community/articles/Using-DevExtremeAngularComponents-With-The-ABP-Framework

  • Standalone routing patterns used in latest ABP Angular templates
    https://abp.io/community/articles/zzi2rr2z
    https://abp.io/community/articles/7qu1m67s

  ---

  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

  start created yesterday

  Please be precise, your AI answer doesn't help here

  Save Cancel
• 

  0

  sumeyye.kurtulus created yesterday

  Support Team Angular Expert

  Hello,

  Thank you for giving details about this problem. The issue occurs since this endpoint expects authorization

  //modules/ragengine/src/RagEngine.HttpApi/Samples/ExampleController.cs
  [Area(RagEngineRemoteServiceConsts.ModuleName)]
  [RemoteService(Name = RagEngineRemoteServiceConsts.RemoteServiceName)]
  [Route("api/rag-engine/example")]
  public class ExampleController : RagEngineController, ISampleAppService
  {
  [HttpGet]
      [Route("authorized")]
      [Authorize]
      public async Task<SampleDto> GetAuthorizedAsync()
      {
          return await _sampleAppService.GetAsync();
      }
  }
  

  We will be making the necessary adjustments. Until we release the fix, you can solve this by adding a guard for the route like this:

  //app.routes.ts
  import { authGuard } from '@abp/ng.core';
  
  export const APP_ROUTES: Routes = [
   { path: 'rag-engine', children: RAG_ENGINE_ROUTES, canActivate: [authGuard] },
  ];
  

  You can let us know if you need further assistance. Thank you for your cooperation.

  Save Cancel
• 

  0

  start created yesterday

  Please check in your answer, it still doesnt work

  

  Save Cancel
• 

  0

  sumeyye.kurtulus created 16 hours ago

  Support Team Angular Expert

  Can you try changing the request url in RagEngineService since backend expects this url /api/rag-engine/example instead of this /api/rag-engine/sample?

  //modules/ragengine/src/RagEngine.HttpApi/Samples/ExampleController.cs
  [Route("api/rag-engine/example")]
  public class ExampleController : RagEngineController, ISampleAppService
  {
  [HttpGet]
      [Route("authorized")]
      [Authorize]
      public async Task GetAuthorizedAsync()
      {
          return await _sampleAppService.GetAsync();
      }
  }
  

  Save Cancel