Overlay position error when using angular material mat-menu

0
votes

Getting error:

ERROR TypeError: this._overlay.position(...).flexibleConnectedTo(...).withTransformOriginOn is not a function at MatMenuTrigger.push../node_modules/@angular/material/esm5/menu.es5.js.MatMenuTrigger._getOverlayConfig (menu.es5.js:1320)

<div class="mat-app-background basic-container">
  <button mat-button [matMenuTriggerFor]="menu">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item>Item 1</button>
  <button mat-menu-item>Item 2</button>
</mat-menu>

Angular material version 6.4.7, cdk version 6.0.1 and cli version 6.1.3

1
angularangular-material
What is the version of the @angular/cdk dependency? - Ploppy
cdk version is 6.0.1 - User3250
@Ploppy Thanks for the hint. updating @angular/cdk to 6.4.7 worked! - User3250
Yep it was what I thought. I will post an answer. - Ploppy

1 Answers

3
votes

It looks like your @angular/cdk version is not aligned with the @angular/material version.

In your case, they both should be at version 6.4.7

In the future, make sure to update your app with the ng update command, it takes care of those things for you.