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

9 Answer(s)

• 

  0

  AI-Bot created 9 months ago

  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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  start created 9 months ago

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

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  sumeyye.kurtulus created 9 months ago

  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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  start created 8 months ago

  Please check in your answer, it still doesnt work

  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  sumeyye.kurtulus created 8 months 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();
      }
  }
  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  start created 9 months ago

  You should try it out by your self, it s not working

  After clicking I need to log in

  

  

  

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  sumeyye.kurtulus created 9 months ago

  Support Team Angular Expert

  Hello again,

  I am sharing the project via this link https://drive.google.com/file/d/16OROyNT2T3lwIOakvXAu0x4SGnopYpv6/view?usp=sharing I have only updated these two files and it should work as expected.

  

  Thank you for your cooperation.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  start created 9 months ago

  I need access why dont you just check in (using the repo)

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  enisn created 6 months ago

  Support Team .NET Developer

  Hi,

  Thanks for the detailed screenshots.

  This does not look like a normal usage mistake on your side. For the Angular module installation generated with ABP Studio 2.1.4, there was a template issue in the generated Angular integration.

  From your screenshots, we can see that:

  • the RagEngine menu item is created,
  • the route is added in app.routes.ts,
  • the generated component calls RagEngineService.sample() when the page opens,
  • after login, the page ends with a 404.

  The important point is that the login redirect itself is expected when the route is protected. The actual problem is the 404 that happens after that.

  For this template, the Angular side should use these values:

  1. The rag-engine route should include canActivate: [authGuard].
  2. The generated Angular service should call /api/rag-engine/example instead of /api/rag-engine/sample.

  This issue has already been fixed in newer ABP Studio templates, starting from 2.1.5.

  So, for your existing solution, please do one of these:

  • update ABP Studio to 2.1.5 or later and regenerate/reinstall the module,
  • or apply the same corrections manually in the existing project.

  Also, please make sure the Angular library import used in app.routes.ts is still resolvable from angular/tsconfig.json, and that the module's config provider is still registered in app.config.ts. Those entries are normally added automatically during installation.

  If it still does not work after that, please share these 3 items and we can check the remaining difference directly:

  1. the rag-engine route entry from angular/src/app/app.routes.ts,
  2. the sample() method from modules/ragengine/angular/projects/rag-engine/src/lib/services/rag-engine.service.ts,
  3. the exact failing request URL and status from the browser Network tab.

  Best regards,

  ABP Support Team

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel