Angular Nested Router Outlets with Lazy Loaded Modules

Question

I am trying to create a router-outlet inside another router-outlet to service as sub navigation, but tried the below and its not working

HomeComponent :

<router-outlet></router-outlet>

MainRouting/AppRouting :

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'properties', loadChildren: () => import(`./properties/properties.module`).then(m => m.propertiesModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class MainRoutingModule { }

PropertiesComponent

<button [routerLink]="[{ outlets: { properties: ['searchproperties'] } }]">Search Properties</button>
<router-outlet name="properties"></router-outlet>

PropertiesRouting :

const routes: Routes = [
    { path: '', component: PropertiesComponent},
    { path: 'searchproperties', loadChildren: () => import(`./searchproperties/searchproperties.module`).then(m => m.SearchpropertiesModule), outlet: "properties"},
];

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

Answer 1

Just have your routeroutlet in your properties component

<!--properties.component.html-->
<button [routerLink]="[{ outlets: { properties: ['searchproperties'] } }]">
   Search Properties
</button>
<router-outlet></router-outlet> 
<!--no name on routerOutlet-->

Then in your properties module routing, configure PropertiesComponent at the default route, and your SearchComponent as a child of that route, as below.

// properties-routing module
const routes: Routes = [
{ 
   path: '', 
   component: PropertiesComponent,
   children: [
       { 
           path: 'searchproperties', 
           loadChildren: () => import(`./searchproperties/searchproperties.module`).then(m => m.SearchpropertiesModule)
       },
       // { ...any other child routes }
   ]
},
];

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