Need help with navigation and breadcrumbs not displaying correctly #8392

7 Answer(s)

• 

  0

  liangshiwei created 13 days ago

  Support Team Fullstack Developer

  Hi,

  ABP routes are lazy load, too; you can check it.

  

  https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/identity/src/lib/identity.module.ts#L68

  How do you defined your navigation items, could you show me the full steps?

  Save Cancel
• 

  0

  dshapiro created 13 days ago

  It looks like we're missing the forLazy() call from our module import, but it seems that's something we need to manually create on our modules and just looking at your link, I don't understand how to create this (in explanation, I don't understand what's happening in the forChild() call).

  Here's an anonymized sample of how we've set things up (routes and module names changed to protect our client). Apologies if some of this is implemented strangely; our team is somewhat inexperienced with Angular.

  Would this all work if we implemented and used forLazy() on all of our routing modules that do lazy loading?

  /src/app/app-routing.module.ts

  import { authGuard, permissionGuard } from '@abp/ng.core';
  import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    // ... Removed default ABP routes
  
    // Custom routes
    { 
      path: 'module1', 
      loadChildren: () => import('./modules/module1/module1.module').then(m => m.Module1),
    },
    {
      path: 'module2', 
      loadChildren: () => import('./modules/module2/module2.module').then(m => m.Module2),
    },
    {
      path: 'module3', 
      loadChildren: () => import('./modules/module3/module3.module').then(m => m.Module3),
    },
    {
      path: 'module4', 
      loadChildren: () => import('./modules/module4/module4.module').then(m => m.Module4),
    },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { bindToComponentInputs: true })],
    exports: [RouterModule],
  })
  export class AppRoutingModule {}  
  

  /src/app/modules/module1/module1-routing.module.ts

  import { NgModule } from '@angular/core';
  import { permissionGuard } from '@abp/ng.core';
  import { RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    {
      path: '',
      children: [
        {
          path: 'page1',
          loadChildren: () => import('./module1/page1.module').then(m => m.Page1Module), // Has own routing that exposes child routes for CRUD operations (list, edit, create, update)
        },
        {
          path: 'page2',
          loadChildren: () => import('./module1/page2.module').then(m => m.Page2Module), // Has own routing that exposes child routes for CRUD operations (list, edit, create, update)
          
        },
        // ... snip ...
      ]
    }
  ];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
  })
  export class Module1RoutingModule { }
  
  

  /src/app/route.provider.ts

  import { RoutesService, eLayoutType } from '@abp/ng.core';
  import { APP_INITIALIZER } from '@angular/core';
  
  export const APP_ROUTE_PROVIDER = [
    { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
  ];
  
  function configureRoutes(routes: RoutesService) {
    return () => {
      routes.add([
        {
          path: '/',
          name: '::Menu:Home',
          iconClass: 'fas fa-home',
          order: 1,
          layout: eLayoutType.application,
        },
        {
          path: '/dashboard',
          name: '::Menu:Dashboard',
          iconClass: 'fas fa-chart-line',
          order: 2,
          layout: eLayoutType.application,
          
        },
        {
          name: '::Menu:Module1',
          order: 3,
          iconClass: 'fa fa-gear',
          layout: eLayoutType.application,
        },
        {
          path: '/module1/page1',
          name: 'M1P1',                        
          parentName: '::Menu:Module1',
          order: 1,
          iconClass: 'fas fa-table',
          layout: eLayoutType.application,
        },
        {
          path: '/module1/page2',
          name: 'M1P2',
          parentName: '::Menu:Module1', 
          iconClass: 'fas fa-table',
          order: 2,
          layout: eLayoutType.application,
        },  
        // ... snip ...
      ]);
    };
  }
  
  

  Save Cancel
• 

  0

  liangshiwei created 10 days ago

  Support Team Fullstack Developer

  It looks like we're missing the forLazy() call from our module import, but it seems that's something we need to manually create on our modules and just looking at your link, I don't understand how to create this (in explanation, I don't understand what's happening in the forChild() call).

  Not related to this, forlazy is used to configure some services.

  Could you please share a test project with me? i will check it. thanks shiwei.liang@volosoft.com

  Save Cancel
• 

  0

  dshapiro created 8 days ago

  Sorry for the delay, I've been quite busy with competing priorities. I'll get you this test project as soon as I can, but wanted to check in and ensure this ticket doesn't get closed before I get a chance.

  Save Cancel
• 

  0

  dshapiro created 2 days ago

  Hi Liang Shiwei,

  I tried to email you, but it was rejected by the mail server. I've sent the file as a Google Drive share instead.

  Thanks

  Save Cancel
• 

  0

  liangshiwei created yesterday

  Support Team Fullstack Developer

  Hi,

  This is not about lazy load.

  This is because of your route path,they do not match

  

  

  Save Cancel
• 

  0

  dshapiro created yesterday

  Ah, that makes complete sense. Thank you!

  I wonder, though: is there any ability to highlight the menu item for child routes? As in my example, we usually have /list and /detail child routes. It would be nice to be able to set a menu item "Page 1" with a path of "/module1/page1" and have it be marked as active if we're at either "/module1/page1/list" or "/module1/page1/detail".

  Save Cancel