How to declare routes of feature module as children of another component?

May 31, 2022

I am refactoring my Angular App. My app-routing.module.ts has two main routes:

const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {path: "", component: MainComponent, canActivate: [AuthGuard],children: [
    {path: "orders", component: OrderComponent, children:[...]
   ]},
  
];

Now, I created a routing module for the newly created OrderModule

// in order-routing.module.ts
const routes = [
    {path: "orders", component: OrderComponent, children:[...]
]

now I could remove the route in app-routing.module.ts

const routes: Routes = [
  {path: "login", component: LoginComponent, canActivate: [IsNotLoggedGuard]},
   {path: "", component: MainComponent, canActivate: [AuthGuard],children: []},
  
];

but in the MainComponent I have a <router-outlet></router-outlet where I want to load all feature components but therefore I have to somehow declare the routes as child routes but how would I do that if I have multiple routing modules for each feature module?

>Solution :

Make use of lazy-loading, these feature modules will be loaded once the user hits a particular route.

app-routing.module.ts

const orderModule = () => import('..../order.module.ts').then(m => m.OrderModule);
const otherFeatureModule = () => import('.../feature1.module').then(m => m.FeatureModule);

const routes: Routes = [
  {
     path: "login", 
     component: LoginComponent, 
     canActivate: [IsNotLoggedGuard]
  },
  {  path: "", 
     component: MainComponent, 
     canActivate: [AuthGuard],
     children: [
       {
         path: 'order', 
         loadChildren: orderModule
       },
       {
         path: 'feature1',
         loadChildren: otherFeatureModule
       }
     ]
  }
];

main-component

<!-- your main content -->
<router-outlet></router-outlet> // here will be displayed 
                                // order and other features 
                                // components