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?

Solution 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.

Solution 2

If you want add matMenu in html you need to add directive in appmodule.ts as example..

import {MatMenuModule} from '@angular/material';

imports: [
 BrowserModule,
 MatMenuModule
]

Comments

[Anton Schillén]

I've tried this and the result is the same, furthermore should both ways work according to the documentation.

[Faisal]

see my answer update. You need to upgrade angular version to >= 4.4.3

[Anton Schillén]

I've tried changing all mat->md and Mat->Md as per your answer. But I get the same error. Maybe not clear but the webpack compiles but the error shows in console in chrome.

[Faisal]

Your angular version is the problem. Upgrade to 4.4.3. See the demo I linked.

[Anton Schillén]

Thanks, that was the problem, worked after upgrading to 4.4.3

[k.vincent]

The Upgrade did help. But I get other error when running: ng test --sm=false: Error: The "mat-" prefix cannot be used in ng-material v1 compatibility mode. It was used on an "mat-sidenav-container" element. I did add MATERIAL_COMPATIBILITY_MODE as mentioned here: link Any idea please?

[Faisal]

@k.vincent check the modules that you have imported. The prefix needs to be Mat instead of Md i.e. MatSidenavModule

[k.vincent]

@Faisal: I have already done in the whole application - using: mat-switcher -p path/to/project/tsconfig.json. Therefore I'am already using: mat- instead of: md-

[Faisal]

have you provided the MATERIAL_COMPATIBILITY_MODE in the module where your are using MatSidenavModule ?

[k.vincent]

Yes. import { MATERIAL_COMPATIBILITY_MODE } from '@angular/material'; @NgModule({ providers: [ ..., { provide: MATERIAL_COMPATIBILITY_MODE, useValue: true } ]}) export class AppModule { }

[Faisal]

@k.vincent please follow this link: github.com/angular/material2/issues/6988

[k.vincent]

Well, I did. But I just can't find the fix/solution.

[k.vincent]

@Faisal: My Bad. Fixed now. I had another custom module used instead of the deprecated MaterialModule where I import only the set of components used in the application. There I forgot to add: MATERIAL_COMPATIBILITY_MODE . [Clarification on MaterialModule deprecation(github.com/angular/material2/issues/3991)

[Hardik Masalawala]

it's from '@angular/material/menu'; not from '@angular/material';