Template parse errors: There is no directive with "exportAs" set to "matMenu"

Question

With the new update of Angular Material and its breaking changes, I can no longer use my <md-menu> components. It was working when I imported MaterialModule, but now when importing MatMenuModule or MdMenuModule the following error is generated:

compiler.es5.js:1690 Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "matMenu" ("
</mat-toolbar>
  <mat-menu xPosition="after" [ERROR ->]#wordListMenu="matMenu" 
): 
ng:///NavbarModule/NavbarComponent.html@38:28

I follow the guide and API at the documentation, but the syntax seems to have changed? I've tried both #wordListMenu="matMenu"and #wordListMenu="mdMenu" and the error persist.

My html file (relevant parts) is :

<button mat-button [md-menu-trigger-for]="wordListMenu" [ngClass]="{'active' 
  : isActive(['/wordlist'])}">
  Word Lists
</button>
<mat-menu xPosition="after" #wordListMenu="matMenu" 
  [overlapTrigger]="false">
  //Content of menu
</mat-menu>

My Module is:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {NavbarComponent} from 'app/navbar/navbar.component';
import { MdTooltipModule, MatMenuModule } from '@angular/material';

@NgModule({
  imports: [
    CommonModule,
    MdTooltipModule,
    MatMenuModule
  ],
  declarations: [NavbarComponent],
  exports: [NavbarComponent]
})
export class NavbarModule { }

Is there something I am missing? Why doesn't the compiler recognize matMenu?

Answer 1

The problem is with your angular version. Update your angular version to 4.4.3 or greater. Material 2.0.0-beta.11 depends on 4.4.3 or greater. From the CHANGELOG documentation:

Breaking changes Angular Material now requires Angular 4.4.3 or greater

Link to working demo.