Minha aplicação começa no componente LoginComponente:
bootstrap: [LoginComponent]
No meu login routing module eu defini as seguintes rotas:
const loginRoutes: Routes = [
{path: 'dash', component: DashboardComponent},
{path: 'registrar', component: RegistrarComponent},
];
@NgModule({
imports:[RouterModule.forRoot(loginRoutes)],
exports: [RouterModule]
})
A Dash deve ser acessada quando o usuário faz o login;
No meu login.component.html eu defini um ngIf que só vai aparecer a dash quando o usuário loga no sistema:
<div *ngIf="!usuarioautenticou" class="wrapper">
Neste template eu defini o router-outlet e botões para as chamadas das navegações:
<div>
<button type="submit" routerLink="/dash" name="entrar" (click)="fazerLogin()" class="btn btn-success waves-effect" id="login-button">Entrar</button>
<button type="button" routerLink="/registrar" class="btn btn-outline-success waves-effect">Registrar</button>
</div>
<router-outlet></router-outlet>
Tudo funciona perfeitamente por enquanto. Quando a aplicação está no localhost:4200 ela redireciona para a página de login. Quando clica em registrar ela altera para o componente de registro e quando clico em entrar ele me move para a tela de dash.
O problema é que a dash é um componente fixo que dentro dela vai ter outros componentes, então eu tentei colocar outro router-outlet dentro da dash:
<router-outlet></router-outlet>
dashboard.routing.module.ts:
const dashboardRoutes: Routes = [
{ path: '', component: BemvindoComponent },
];
Porém, o BemVindoComponent não aparece dentro da minha dash. Ele já está como exports e é importado pelo meu módulo de rotas da dash.