【问题标题】:Angular Material Menu module: Export of name 'matMenu' not foundAngular 材质菜单模块:未找到名称“matMenu”的导出
【发布时间】:2025-11-24 10:40:01
【问题描述】:

Angular 材质菜单模块有点问题。

我的 app.module.ts 中有这段代码:

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

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

在我的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 { }

在我的 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 {
  }
}

list-dropdown.component.html中:

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

然后我有这个错误信息:

Error: Export of name 'matMenu' not found!

我看不出问题出在哪里?

【问题讨论】:

  • 你可能需要重启ng serve
  • 需要 BrowserAnimationsModule 吗?
  • 感谢@PoulKruijt,重启有帮助。
  • 感谢兄弟的帮助

标签: angular typescript angular-material angular9


【解决方案1】:

我遇到了同样的问题,服务器重启解决了它。

【讨论】:

  • 你应该只为@Poul Kruijt 的评论点赞/张贴“谢谢” :)
【解决方案2】:

我在单元测试中遇到了同样的问题。通过在测试包中加入 MatMenuModule 模块解决:

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

【讨论】:

    【解决方案3】:

    我有同样的问题 - 关闭您的终端并再次启动服务器(ng serve)。

    【讨论】:

    • 感谢@Naveen 这对我的帮助和工作!
    【解决方案4】:

    我今天遇到了这个问题,你需要做的就是在你使用 matMenu 的当前组件的模块中导入下面的这一行 import { MatMenuModule } from '@angular/material/menu';

    【讨论】: