When I enter in my form the user test1.

first - step

My dashboard is displayed, with 2 elements Bonjour and Logout.

second - step

When I click on Logout, a page weird is displayed...

third - step

I'm sure the problem is here

<app-dashboard-layout [configuration]="configuration" *ngIf="currentUser">
  <div container="sidePanel">
    <app-navigation-side-panel [links]="links"></app-navigation-side-panel>
  </div>
  <div container="navigationBar" *ngIf="currentUser">
    <app-navigation-bar></app-navigation-bar>
  </div>
  <div container="mainContent">
    <div>
      <a style="color: black" (click)="logout()">Logout </a>
      <router-outlet></router-outlet>
    </div>
  </div>
</app-dashboard-layout>
<router-outlet></router-outlet>

I don't have an immediate solution...

https://stackblitz.com/edit/angular-ivy-3r4a6v?file=src/app/app.component.html

CodePudding user response：

<app-dashboard-layout
  [configuration]="configuration"
  *ngIf="currentUser; else notLoggedIn"
>
  <div container="sidePanel">
    <app-navigation-side-panel [links]="links"></app-navigation-side-panel>
  </div>
  <div container="navigationBar" *ngIf="currentUser">
    <app-navigation-bar></app-navigation-bar>
  </div>
  <div container="mainContent">
    <div>
      <a style="color: black" (click)="logout()">Logout </a>
      <router-outlet></router-outlet>
    </div>
  </div>
</app-dashboard-layout>
<ng-template #notLoggedIn>
  <router-outlet></router-outlet>
</ng-template>

I have updated your example. Your problem was, that you have two <router-outlet>. When you wrap the second one in a template and connect it to your if currentUser it works fine.