Hi, I'm having a weird behavior with the sidenav component, sometimes works fine, but most of the time I'm getting this error:

this is the app.module.ts

@NgModule({declarations: [
AppComponent,
AlertComponent,
TreeComponent
],
imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    BrowserAnimationsModule,
    DxListModule,
    DxDiagramModule,
    MdbModalModule,    
    MdbSidenavModule,
    FormsModule,
    ReactiveFormsModule,
],

providers: [],
bootstrap: [AppComponent]})
export class AppModule { }

html

       <mdb-sidenav-layout id="sidenav-1">
    <mdb-sidenav #sidenav="mdbSidenav" [accordion]="true" [mode]="'side'"                         [position]="'fixed'" [hidden]="false"
      [slim]="slim" [slimCollapsed]="true" [expandOnHover]="true">
      <ul class="sidenav-menu">
        <mdb-sidenav-item>
          <a class="sidenav-link"><i class="fas fa-bars me-3"></i><span slim="false">Apps</span></a>
        </mdb-sidenav-item>     
        <mdb-sidenav-item>
          <a class="sidenav-link" (click)="go('catalog')"><i class="fas fa-book me-3" ></i><span slim="false">Catálogos</span> </a>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
            <a class="sidenav-link" (click)="go('rbd')"><i class="fas fa-project-diagram me-3"  ></i><span slim="false">Modelo Digital</span>             </a>
          </mdb-sidenav-item>
        <mdb-sidenav-item>
          <a class="sidenav-link" (click)="go('family-manager')"><i class="fas fa-snowplow me-3" ></i><span slim="false">Familias</span>   </a>
          <ul class="sidenav-collapse" mdbCollapse>
            <li class="sidenav-item">
              <a class="sidenav-link">Configuración 1</a>
            </li>
            <li class="sidenav-item">
              <a class="sidenav-link">Configuración 2</a>
            </li>
          </ul>
        </mdb-sidenav-item>
      </ul>
      <hr />
      <ul class="sidenav-menu">
        <mdb-sidenav-item>
          <a class="sidenav-link"><i class="fas fa-industry me-3"></i><span slim="false">Arbol DLF</span></a>
        </mdb-sidenav-item>
      </ul>
      <hr />
      <ul class="sidenav-menu">
        <mdb-sidenav-item>
          <a class="sidenav-link"><i class="far fa-chart-bar me-3"></i><span slim="false">OEE</span></a>
        </mdb-sidenav-item>
        <mdb-sidenav-item>
          <a class="sidenav-link"><i class="fas fa-project-diagram me-3"></i><span slim="false">Arbol de valor</span></a>
        </mdb-sidenav-item>
      </ul>
    </mdb-sidenav>
    <mdb-sidenav-content #sidenavContent>
            <router-outlet></router-outlet>
    </mdb-sidenav-content>
  </mdb-sidenav-layout>

and app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Settings';
  slim = true;
constructor(private router: Router,)
{}

go(url)
{
  this.router.navigate(["/"+url]);
}
}