My goal is to have 2 separate views, one for the homepage and another for authentication. I want to display the LoginComponent on the route '/' and the SignupComponent on the route '/signup' if the user is not logged in, otherwise render the components of the homepage. I attempted to use 2 different router outlets for the homepage and authentication (but encountered an issue where the route '/signup' was not configured). Here is my implementation:
app.component.html
<div *ngIf="logged$ | async; else login">
<app-header></app-header>
<router-outlet></router-outlet>
<!-- ? Primary Outlet -->
</div>
<ng-template #login>
<router-outlet name="auth"></router-outlet>
<!-- ? Secondary Outlet for Auth -->
</ng-template>
app.component.ts
@Component({ ... })
export class AppComponent {
logged$: Observable<boolean>;
constructor(private store: Store<State>) {
this.logged$ = store.select('logged');
}
}
app-routing.module.ts
const routes: Routes = [
{ path: '', children: [/* Homepage Components */] },
{
path: '',
children: [
{ path: '', component: LoginComponent },
{ path: 'signup', component: SignupComponent },
],
outlet: 'auth',
},
];
@NgModule({ ... })
export class AppRoutingModule {}