Angular7 Material7.3 Переключатель боковой панели перестает работать при добавлении содержимого компонента

Question

Я просто настраиваю новый проект, и я успешно настраиваю свою боковую панель, и всякий раз, когда у меня появляется новый компонент и маршрут к компоненту, он отлично работает, если я переключаюсь с помощью кнопки меню, но перестает работать, когда контент добавляется в новый компонент.

app.component.ts

<!--The content below is only a placeholder and can be replaced.-->

<mat-toolbar  color="primary">
  <mat-toolbar-row>
    <!-- Menu Toggle -->
    <button type="button" mat-icon-button (click)="drawer.toggle()">
      <mat-icon>menu</mat-icon> 
    </button>
    <h3>Penaid</h3>
    <!-- Spacer -->
    <span class="fill-space"></span>
    <mat-icon aria-label="Dashboard button">logout</mat-icon>
    <!-- Drop down Toggle -->
    <button mat-icon-button [matMenuTriggerFor]="appMenu">
    <mat-icon>more_vert</mat-icon> 
    </button>

  </mat-toolbar-row>
  <!-- #Toolbar end -->
</mat-toolbar>

<mat-menu #appMenu="matMenu" xPosition="after" yPosition="above">
  <a target="_blank" href="https://emailserver.com/webmail" mat-menu-item>Webmail</a>
  <a mat-menu-item routerLink="/register">Register user</a>
  <a mat-menu-item routerLink="/">Logout</a>
</mat-menu>


<mat-sidenav-container class="main-container" >
  <mat-sidenav #sidebar class="sidenav" mode="over">
    <!-- Route Links -->
    <nav>
      <ul>
        <li class="no-margin no-padding" no-margin="" no-padding="">
          <a  mat-flat-button routerLink="/dashboard">
            <mat-icon aria-label="Dashboard button">dashboard</mat-icon>
            Dashboard 
          </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">

            <a  mat-flat-button routerLink="/payment">
              <mat-icon aria-label="Payment button">money</mat-icon>
              Payment 
            </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">

          <a  mat-flat-button routerLink="/analytics">
            <mat-icon aria-label="Analytics button">bar_chart</mat-icon>
            Analytics 
          </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">
          <a  mat-flat-button routerLink="/customers">
            <mat-icon aria-label="Customers button">person</mat-icon>
            Customers 
          </a>
        </li>
        <li class="no-margin no-padding" no-margin="" no-padding="">
          <a  mat-flat-button routerLink="/institutions">
            <mat-icon aria-label="Institution button">house_bank</mat-icon>
            Institution 
          </a>
        </li>
      </ul>
    </nav>
  </mat-sidenav>
    <!-- Main content -->
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>

</mat-sidenav-container>

register.component.ts и любой компонент, имеющий <mat-xxxx>, нарушает sidenav

<h3 text-center>Register new user</h3>

<mat-card>
  <mat-card-content>
    <mat-form-field>

    <mat-error></mat-error>
  </mat-form-field>
  </mat-card-content>

</mat-card>

Наблюдение Если я удаляю <mat-xxxx> и использую обычные теги, все снова работает нормально, и это относится к каждому компоненту, к которому я пытаюсь добавить контент, потому что я использую угловой материал