Angular Cannot match any routes. URL Segment

Question

I have a board with four columns, each column is fill with n number of items, when i click in one of the items, the details section that is in a sidenav should be loaded, For some reason that i still can get why...i´m getting this error Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'HyPE4PM/2/details/5413869/DETAILS' Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'HyPE4PM/2/details/5413869/DETAILS' every time i try to open the details section in my project. the way it is right now my app.module is lazy loading backlog.module and my backlog module is lazy loading board.module as children and the board.module is lazy loading the details.module as children.

app-routing.module

export const routes: Routes = [
  {
    path: 'HyPE4PM',
    loadChildren: () => import('./modules/lazy/backlog.module').then((mod) => mod.BacklogModule)
  },
  {
    path: 'Error',
    loadChildren: () => import('./modules/lazy/error-site.module').then((mod) => mod.ErrorSiteModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})

backlog-routing.module

/**
 * define the routes for the BacklogComponent module
 */
const routes: Routes = [
  {
    path: '',
    component: BacklogComponent,
    children: [
      {
        path: '2',
        loadChildren: () => import('../lazy/boards-modules/taskboard.module').then((mod) => mod.TaskboardModule)
      },
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

board-routing.module

const routes: Routes = [
  {
    path: '',
    component: TaksboardComponent,
    children: [
      { path: 'details/:id', redirectTo: 'details/:id/DETAILS', pathMatch: 'full' },
      {
        path: 'details/:id/:detailsSection',
        loadChildren: () => import('../lazy/backlog-item-details.module').then((mod) => mod.BacklogItemDetailsModule),
        outlet: 'rightSidenav',
        data: { preload: true, delay: 2500 }
      }
    ]
  }
];

/**
 * define the routing for the BacklogComponent module
 */
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

Then i´m using the router.navigate to go the details of the selected item:

  public selectItem(event: MouseEvent, position: DetailSections) {
    this.log.trace(`selectItem() in backlog item comp. id: ${this.backlogItem.id}`);
    this.eventService.hideBoardCreator.emit();
    // as the click to these events are bound on the DOM on childs of the click to the details -> we need to stop the event here
    // if TS on other card is shown, it needs to be hidden
    event.stopPropagation();

    // save selection into store
    this.store.dispatch(new BacklogItemSelected(this.backlogItem));

    // show the details section
    this.router.navigate([`/HyPE4PM/${this.configService.boardtype}/details`, this.backlogItem.id, DetailSections[position]]);
  }

here i share a stackblitz of the error, as you can see in the example if you try to go to the route hype/2/details you will get error.

Answer 1

add new path:'details in board-routing.module like this..

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { BoardComponent } from './board.component';

/**
    * Define all available routes
*/
export const routes: Routes = [
{
    path: '',
    component: BoardComponent,
    children: [
   {
      path: 'details',
      loadChildren: () => import('./details/details.module').then((mod) => mod.DetailsModule),
    outlet: 'details'
  }
]
},{
    path: 'details',
loadChildren: () => import('./details/details.module').then((mod) => mod.DetailsModule)
 }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class BoardRoutingModule {}

Answer 2

in your app-routing.module

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: 'src/app/customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: 'src/app/orders/orders.module#OrdersModule'
  },
  {
    path: '',
    redirectTo: '',
    pathMatch: 'full'
  }
];

Here is a basic example of how to use lazy loading