Within my application, I have divided it into two areas: the admin area (referred to as iwti) and the 'retaguarda' area. The 'retaguarda' section is functioning correctly, but when I navigate to the route /iwti
, the layout within the <router-outlet>
does not display. I tried accessing the route directly after removing the login guard, but the layout did not load either. Additionally, I have implemented an idle timer that redirects the user to the login page. However, an error message is displayed:
Error "Can not find primary outlet to load 'LoginComponent'".
I am uncertain if I am changing between the areas correctly, so I will include the relevant code below.
app.routing.module.ts
export const mainRoutes: Routes = [
{ path: 'login', component: LoginComponent },
]
app.component.html
<app-iwti *ngIf="environment.isIWTIUserAuthentication">
</app-iwti>
<app-retaguarda *ngIf="!environment.isIWTIUserAuthentication">
iwti.routing.module.ts
const iwtiRoutes: Routes = [
{ path: 'iwti', component: IwtiDashboardComponent, canActivate: [LoginGuard] },
{ path: 'iwti/funcionario', component: IwtiFuncionarioComponent, canActivate: [LoginGuard] }
]
Once a user logs in, they are directed to the router.navigate(['iwti'])
route.
iwti.component.html
<header>
<div [hidden]="!environment.isAuthenticated">
<app-iwtinavbar></app-iwtinavbar> <!--This displays normally when logged in-->
</div>
</header>
<div class="container" [hidden]="!environment.isAuthenticated">
<router-outlet></router-outlet> <!--The issue might be here. If I assign a name to the outlet and reference it in the routing file, it gives an error saying it cannot find a route with that name.-->
</div>
structure