18

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?

4
  • 18
    You probably need to restart ng serve May 15, 2020 at 10:50
  • is it require BrowserAnimationsModule? May 15, 2020 at 11:36
  • thanks @PoulKruijt , the restart helped. May 15, 2020 at 12:01
  • thanks bro it helped Dec 13, 2020 at 20:14

7 Answers 7

34

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

2
  • 1
    You should have just upvote / post "thank you" for a comment by @Poul Kruijt :) Jun 25, 2020 at 18:10
  • I tried many things and this strangely resolved my issue ? Usually the application gets into this state when I generate something , or npm install a new package ... still want to understand root cause.
    – Tjad Clark
    Feb 10, 2022 at 10:53
20

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();
  });
4

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

0
2

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';

1

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!

0

I had a same issue while unit testing, but after importing MatMenuModule in spec file, fixed this issue.

1
  • Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.
    – Y. Gherbi
    Aug 8, 2022 at 18:08
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.