Load a common component in named outlet

Question

I have a requirement where I have a login page which has just the login component. Once a person logs in, the user gets to page having a left navigation and a component on the right. With the help of this left navigation, a person can navigate to different components.

So the thing is, the left navigation component should be available on all the pages once logged-in and not on the login page.

I tried to replicate the same at https://stackblitz.com/edit/angular-common-component-in-named-router-outlet but it just loads the navigation component. The router configuration looks like

[
    { path: "", component: HomeComponent },
    {
        path: "messages",
        component: NavComponent,
        children: [{ path: "", component: MessagesComponent, outlet: "content" }]
    },
    {
        path: "users",
        component: NavComponent,
        children: [{ path: "", component: UsersComponent, outlet: "content" }]
    }
];

Answer 1

Named outlets are a PITA and not worth the trouble, especially for this, you could just do this:

[
    { path: "", component: HomeComponent },
    {
        path: "messages",
        component: NavComponent,
        children: [{ path: "", component: MessagesComponent}]
    },
    {
        path: "users",
        component: NavComponent,
        children: [{ path: "", component: UsersComponent }]
    }
];

and stick a normal <router-outlet></router-outlet> in your nav component... no real need for the name in this structure. But I think you'd be better served with a structure like:

[
    { path: "", component: HomeComponent },
    {
        path: "main",
        component: NavComponent,
        children: [
          { path: "messages", component: MessagesComponent},
          { path: "users", component: UsersComponent }
        ]
    }
];

and the same router-outlet in your nav component. the only difference here is you're prefixing your logged in paths with "main" so you don't need to repeat your routes over and over for them to be matched