Atualmente, meu app-routing.ts está assim:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'clientes', loadChildren: () => import('../../modules/cliente/cliente.module').then(m => m.ClienteModule) },
{ path: 'fornecedores', loadChildren: () => import('../../modules/fornecedor/fornecedor.module').then(m => m.FornecedorModule) },
{ path: 'produtos', loadChildren: () => import('../../modules/produto/produto.module').then(m => m.ProdutoModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
exports: [RouterModule]
})
export class AppRoutingModule { }
E o meu app.component.html está assim:
<body class="sb-nav-fixed">
<app-topbar></app-topbar>
<div id="layoutSidenav">
<app-sidebar></app-sidebar>
<div id="layoutSidenav_content">
<app-content></app-content>
</div>
</div>
</body>Sendo que o meu router-outlet está dentro de app-content:
<main>
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
</main>A minha idéia é jogar o código que hoje está dentro de app.component.html para dentro de um layout.component.html, ficando o apenas um router-outlet dentro de app.component.html. Pois dessa maneira, o router-outlet seria populado com a página de login ou com o conteúdo do sistema (menus, etc) que estarão em layout.component.html.
A minha dúvida é: Como fazer isso mantendo o carregamento preguiçoso dos meus módulos (clientes, fornecedores, produtos)?
O problema são as "subrotas", que não estariam mais dentro de app-routing, eu imagino, mas sim dentro do módulo layout e, basicamente, passariam a existir dois router-outlet na aplicação. Sendo o primeiro para definir (login ou menus) e o segundo para as páginas em si (clientes, fornecedores, produtos...)
Tentei ontem a noite toda e não consegui chegar a lugar nenhum!
Se alguém puder me dar uma luz....
