ERROR TypeError: can't access property "menuPositionClassChanged", this._dropdownMenu is undefined

[Zahen]

Hello,

I got an error after upgrading my application to Angular 17 and I am using MDB-Angular-UI-KIT 6.0.0.

The error : ERROR TypeError: can't access property "menuPositionClassChanged", this._dropdownMenu is undefined

I am using a navbar with reactive router.

Here is a sample of my navbar compnent :

<header>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <button
        class="navbar-toggler"
        type="button"
        (click)="basicNavbar.toggle()"
        aria-expanded="false"
        aria-label="Toggle navigation">
        <i class="fas fa-bars"></i>
      </button>
      <div class="collapse navbar-collapse"
           id="navbarSupportedContent"
           mdbCollapse
           #basicNavbar="mdbCollapse">
        <ul class="navbar-nav me-auto">
          <li class="nav-item">
            <a id="projects-navbar-link"
               class="nav-link fw-bold"
               [routerLink]="['/']"
               [routerLinkActive]="['router-link-active']"
               [routerLinkActiveOptions]="{exact:true}">XXXX</a>
          </li>
          <li class="nav-item dropdown" mdbDropdown>
            <a mdbDropdownToggle type="button" class="nav-link dropdown-toggle fw-bold">XXX</a>
            <div mdbDropdownMenu class="dropdown-menu" role="menu">
              <a id="x-1-navbar-link"
                 class="dropdown-item"
                 [routerLink]="['x-1']"
                 [routerLinkActive]="['router-link-active']"
                 [routerLinkActiveOptions]="{exact:true}">X1</a>
              <a id="x-2-navbar-link"
                 class="dropdown-item"
                 [routerLink]="['x-2']"
                 [routerLinkActive]="['router-link-active']"
                 [routerLinkActiveOptions]="{exact:true}">X2</a>
              <a id="x-3-navbar-link"
                 class="dropdown-item"
                 [routerLink]="['x-3']"
                 [routerLinkActive]="['router-link-active']"
                 [routerLinkActiveOptions]="{exact:true}">X3</a>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</header>

<main>
  <div class="container-fluid">
    <div class="row">
      <div class="col">
        <router-outlet></router-outlet>
      </div>
    </div>
  </div>
</main>

My package.json :

"dependencies": {
    "@angular/animations": "^17.3.1",
    "@angular/cdk": "^17.3.1",
    "@angular/common": "^17.3.1",
    "@angular/compiler": "^17.3.1",
    "@angular/core": "^17.3.1",
    "@angular/forms": "^17.3.1",
    "@angular/material": "^17.3.1",
    "@angular/platform-browser": "^17.3.1",
    "@angular/platform-browser-dynamic": "^17.3.1",
    "@angular/router": "^17.3.1",
    "@fortawesome/fontawesome-free": "^6.5.1",
    "@ng-select/ng-select": "^12.0.7",
    "angular-animations": "~0.0.10",
    "angular-toaster": "^1.5.2",
    "core-js": "^3.36.1",
    "mdb-angular-ui-kit": "^6.0.0",
    "ng2-file-upload": "^5.0.0",
    "rxjs": "^7.8.1",
    "tslib": "^2.6.2",
    "xlsx": "^0.18.5",
    "zone.js": "^0.14.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.1",
    "@angular/cli": "^17.3.1",
    "@angular/compiler-cli": "^17.3.1",
    "@angular/language-service": "^17.3.1",
    "@types/node": "^20.11.30",
    "esbuild": "^0.20.2",
    "ng-packagr": "^17.3.0",
    "sass-migrator": "^2.0.3",
    "ts-node": "^10.9.2",
    "typescript": "~5.4.3"
  }

Thank you for your help