Activities of "dshapiro"

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 ...
    ]);
  };
}

• ABP Framework version: v8.3.0
• UI Type: Angular
• Database System: EF Core (SQL Server)
• Tiered (for MVC) or Auth Server Separated (for Angular): yes
• Exception message and full stack trace: N/A
• Steps to reproduce the issue:

In our Angular application we've defined our navigation items in src/app/route.provider.ts and defined our routes within src/app/app-routing.module.ts with additional child routes loaded from lazy-loaded modules referenced within it.

We're finding that items in the navigation menu that have sub-items don't stay open/expanded (as the out of the box Administration menu does) when visiting child routes. Possibly related, we note that the breadcrumbs rarely show the correct location either.

Are we missing something obvious here? Does this just not work with lazy-loaded routes?