Роутер-аутлет освежает весь сайт

Question

Прежде всего, извините за мой плохой английский sh.

В настоящее время я работаю в приложении, построенном с Angular 8. Для маршрутизации мы используем Router-Outlet

Сначала мы сделали макет приложения, используя материал Angular. И там все прекрасно работало

  <mat-sidenav-container autosize class="sidenav-container" fixedInViewport="true">
    <mat-sidenav #sidenav mode="over">
      <mat-nav-list *ngIf="this.authService.userData!=null">
        <mat-list-item class ="sidenav-itemlist"> <a routerLink="/home"  routerLinkActive="active" (click)="sidenav.close()" >{{ "Home" | translate }}</a> </mat-list-item>            
        <mat-list-item class ="sidenav-itemlist"> <a routerLink="/about" routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()">{{ "About" | translate }}</a> </mat-list-item>
        <mat-list-item> <a routerLink="/company" (click)="sidenav.close()">{{ "Menu.Companies" | translate }}</a> </mat-list-item>   
        <mat-list-item class ="sidenav-itemlist"> <a  routerLink="/login" routerLinkActive="active" (click)="sidenav.close() " >{{ "Log out" | translate }}</a> </mat-list-item>
      </mat-nav-list>
    </mat-sidenav>

    <mat-sidenav-content >
        <router-outlet></router-outlet>
    </mat-sidenav-content>

  </mat-sidenav-container>

После этого мы начали с самого приложения (оставив в стороне материал). Но после этого при изменении маршрута перезагружается весь сайт, а не только предназначенный компонент, и я не уверен, почему это происходит

  <div id="page">
    <header tabindex="0" *ngIf="this.authService.userData!=null">SOD Tool</header>
    <div id="nav-container" *ngIf="this.authService.userData!=null">
      <div class="bg"></div>
      <div class="button" tabindex="0">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </div>
      <div id="nav-content" tabindex="0" >
        <ul>
          <li><a routerLink="/home"  routerLinkActive="active" (click)="sidenav.close()" >{{ "Home" | translate }}</a></li>
          <li><a routerLink="/about" routerLinkActive="active"  [routerLinkActiveOptions]="{ exact: true }" (click)="sidenav.close()">{{ "About" | translate }}</a></li>
          <li><a routerLink="/company" (click)="sidenav.close()">{{ "Menu.Companies" | translate }}</a></li>
          <!-- <li><a href="#0">About</a></li> -->
          <li><a routerLink="/login" routerLinkActive="active" (click)="sidenav.close() " >{{ "Log out" | translate }}</a></li>
          <!-- <li class="small"><a href="#0">Facebook</a><a href="#0">Instagram</a></li> -->
        </ul>
      </div>
    </div>

    <main>
      <router-outlet></router-outlet>
    </main>

  </div>

Надеюсь, кто-то может помочь. Заранее спасибо.