One issue I am facing with my application is the rendering of different pages based on whether a user is logged in or not. The generic pages like the landing or logout page should be displayed within the primary router-outlet when the user is not logged in. However, for logged-in users, I want specific pages to be rendered within a layout component that includes navigation, footer, header, etc. I am struggling to render these logged-in user pages within a named router-outlet that I believe should be located within my layout component.
app.routes.ts
export const routes: Routes = [
{ path: '', redirectTo: 'landing', pathMatch: 'full' },
{
path: 'landing',
component: LandingPageComponent
},
{
path: 'intern',
component: NavigationComponent,
children: [
{
path: 'enterprise',
component: OverviewComponent,
},
{ path: '', redirectTo: 'enterprise', pathMatch: 'full' },
]
},
];
navigation.component.html
<header></header>
<router-outlet name="intern"></router-outlet>
<footer></footer>
While the Landing and Navigation components are displaying correctly, the content of the pages intended to be shown within the named router-outlet "intern" are not appearing. It's important to note that according to my understanding, if the child route and the named router-outlet share the same name ('intern'), there is no need to define the "outlet: 'intern'" property in the app.routes.ts file.