typescript - Enrutamiento de módulos con funciones con el mismo diseño principal en angular

Quiero usar el mismo diseño (que está definido en app.module.ts) para diferentes módulos de funciones, cada módulo tiene su propia navegación. Y un diseño separado de inicio de sesión/registro que no tendría menú lateral, encabezado ni pie de página. Hasta ahora intenté esto:

//../app/app.component.html
<router-outlet></router-outlet> // here i want login and layout view.

y un componente de diseño:

//../app/layout.component.html
<header></header>
<side-menu></side-menu>
<router-outlet></router-outlet> // here i want layout views that would have side menu with them e.g. dashboard, inventory etc
<footer></footer>

Las rutas del panel están en app.module.ts, pero el inventario y otros módulos tienen sus propios módulos y rutas como se muestra a continuación:

//app.module.ts
const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: '',
        component: LayoutComponent,
        children: [
            { path: '', component: DashboardOne},
            { path: 'dashboardOne', component: DashboardOne},
            { path: 'dashboardTwo', component: DashboardTwo}
        ],
        canActivate: [AuthGuard]
    }
];    
@NgModule({
  declarations: [
    AppComponent,
    DashboardOneComponent,
    DashboardTwoComponent,
    LoginComponent,
    LayoutComponent
  ],
  imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    InventoryModule,
    WarehouseModule,
    UserModule,
  ],
  providers: [AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule { }

y el otro módulo:

//inventory.module.ts
const appRoutes: Routes = [
    {
        path: 'inventory',
        //component: LayoutComponent,
        children: [
            { path: '', component: InventoryOne},
            { path: 'inventoryOne', component: InventoryOne},
            { path: 'inventoryTwo', component: InventoryTwo}
        ],
        canActivate: [AuthGuard]
    }
];
@NgModule({
  declarations: [
    AppComponent,
    InventoryOneComponent,
    InventoryTwoComponent,
    //LayoutComponent // want to use this layout in other modules too
  ],
  imports: [
    RouterModule.forChild(
      appRoutes
    ),
  ],
  providers: [],
})
export class InventoryModule { }

si quito el comentario del componente de diseño del módulo de inventario, vuelve a renderizar el componente de diseño (no quiero eso) quiero usar layoutComponent en cada módulo que tenga sus propias rutas y hasta ahora no he podido hacerlo.

Respuesta #1

En tu AppModule puedes redirigir al FeaturesModule por defecto, que tendrá el menú del LayoutComponent, mientras que el AuthGuard puede redirigir a /login cuando sea necesario.

const appRoutes: Routes = [
  {        
    path: '',
    loadChildren: '../<insertyourpath>/features.module#FeaturesModule',
    canActivate: [AuthGuard]
  },
  {
     path: 'login',
     component: LoginComponent
  }
];

En tu FeaturesModule tendrás las rutas de las funcionalidades renderizadas en el outlet del LayoutComponent:

const featureRoutes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {        
        path: 'inventory',
        loadChildren: '../<insertyourpath>/inventory.module#InventoryModule'
      }
    ]
  }
];

En tu InventoryModule colocas todas las rutas hijas del módulo (otros FeatureModules respectivamente). El DashBoard tiene que ser movido al FeaturesModule o a su propio módulo.

const inventoryRoutes: [
  { path: '', component: InventoryOne},
  { path: 'inventoryOne', component: InventoryOne},
  { path: 'inventoryTwo', component: InventoryTwo}
];

Tenga en cuenta que con la sintaxis loadChildren dada, el módulo referenciado se cargará de forma diferida. Si desea que se cargue de manera sincrónica, consulte esta respuesta de SO.