'Angular Material Menu module: Export of name 'matMenu' not found

I have a little issue with Angular Material Menu module.

I have this code in my app.module.ts:

import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    SharedModule,
  ],
})
export class AppModule { }

In my shared.module.ts:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatMenuModule } from '@angular/material/menu';
import { ListDropdownComponent } from './list-dropdown/list-dropdown.component';

@NgModule({
  declarations: [
    ListDropdownComponent,
  ],
  imports: [
    MatMenuModule,
  ],
  exports: [
    ListDropdownComponent,
  ],
})
export class SharedModule { }

In my list-dropdown.component.ts:

import { Component, OnInit, Output, EventEmitter, Input } from '@angular/core';

@Component({
  selector: 'app-list-dropdown',
  templateUrl: './list-dropdown.component.html',
  styleUrls: ['./list-dropdown.component.scss']
})
export class ListDropdownComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }
}

In the list-dropdown.component.html:

<button mat-icon-button [matMenuTriggerFor]="menu">
  My dropdown menu
</button>
<mat-menu #menu="matMenu">
  <!-- ... -->
</mat-menu>

Then I have this error message:

Error: Export of name 'matMenu' not found!

I can't see where is the problem here?



Solution 1:[1]

I had the same problem and a server restart fixed it.

Solution 2:[2]

I had the same problem executing the unit tests.

Solved by importing MatMenuModule to the TestBed:

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [MatMenuModule],
      declarations: [YOURCOMPONENT],
    }).compileComponents();
  });

Solution 3:[3]

I had the same problem - close your terminal and again start server (ng serve).

Solution 4:[4]

I got this problem today and what you need to do is just import this line below in the current component's module you using matMenu import { MatMenuModule } from '@angular/material/menu';

Solution 5:[5]

For me, just restarting ng serve wasn't enough. I didn't get rid of the error, until I removed the mat-menu directives from the template, restarted ng serve, and then simply added the mat-menu stuff back to the template. Crazy error!

Solution 6:[6]

I had the same error and restarting the server just worked for me!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jadamae77
Solution 2
Solution 3 Naveen Patel
Solution 4 0xLogN
Solution 5 Touré Holder
Solution 6 Ari