how to override parent component in angular 11 routing?

Question

in angular I have this main app route for import modules and set layout component to all routes that's imported , but I want to change the layout for some routes like print pages in modules, please see the main routes :

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: 'buySell',
        loadChildren: () =>
            import('../modules/buySell/buySell.module').then(
                (m) => m.BuySellModule
            ),
      },
      {
        path: 'product',
        loadChildren: () =>
            import('../modules/product/product.module').then(
                (m) => m.ProductModule
            ),
      },
      {
        path: '',
        redirectTo: '/dashboard',
        pathMatch: 'full',
      },
      {
        path: '**',
        redirectTo: 'error/404',
      },
    ],
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class PagesRoutingModule { }

and import all modules routes and set LayoutComponent for all, now I want to create a print page in a module that layout different see child module:

const routes: Routes = [
  {
    path: '',
    component: BuySellComponent,
    children: [
      {
        path: 'preInvoice',
        // canActivate: [PermissionGuard],
        component: BuySellPreInvoiceListComponent,
        // data: {permissions:  [ ]},
      },
      {
        path: 'preInvoice/add',
        component: BuySellPreInvoiceEditComponent
      },
      {
        path: 'preInvoice/edit/:id',
        component: BuySellPreInvoiceEditComponent
      },


      { path: '**', redirectTo: 'oopsRoutingFile', pathMatch: 'full' },
    ],
  },


  // this is my print and I need to change the parent layout
  {
    path: 'preInvoice/print/:id',
    component: BuySellPreInvoicePrintComponent,
  },



];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class BuySellRoutingModule {}

how can I remove or override the parent layout component ?

Answer 1

We can change the route configuration with resetConfig method in router. To change the current configuration and add another page in our existing configuration, we can write out root route configuration in routeConfig.ts file

routeConfig.ts

export const routes: Routes = [
  {
    path: '',
    component: BuySellComponent,
    children: [
      {
        path: 'preInvoice',
        // canActivate: [PermissionGuard],
        component: BuySellPreInvoiceListComponent,
        // data: {permissions:  [ ]},
      },
      {
        path: 'preInvoice/add',
        component: BuySellPreInvoiceEditComponent
      },
      {
        path: 'preInvoice/edit/:id',
        component: BuySellPreInvoiceEditComponent
      },
      { path: '**', redirectTo: 'oopsRoutingFile', pathMatch: 'full' },
    ],
  }
]

In app.routing.module.ts, we can import that configuration from that file and use that.

import { routes } from './routes/routeConfig'; 

In component.ts file, we need to inject router object into the constructor and import default route configuration from routeConfig.ts file in that component And later user resetConfig method and change the config as per the need

    import {routes} from '../../route/routeConfig';

    constructor(router: Router) {}
     
    someMethod() {
       let additionalRoute ={
            path: 'preInvoice/print/:id',
            component: BuySellPreInvoicePrintComponent,
       };
   
       let routeConfig = [...routes];
       
       routeConfig[0].children.splice(2, 0, additionalRoute );
      
       this.router.resetConfig(routeConfig);
    }