Angular Material菜单模块：找不到名称为“matMenu”的导出项。

Question

我在 Angular Material 菜单模块上遇到了一些问题。

以下是我在 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!

我看不出问题在哪里？

- Ferenc Bablena

---

您可能需要重新启动 ng serve。 - Poul Kruijt

需要 BrowserAnimationsModule 吗？ - Mahmoud Nasr

谢谢 @PoulKruijt，重新启动有帮助。 - Ferenc Bablena

谢谢兄弟，它帮了我。 - parth jansari

Answer 1

我也遇到了同样的问题，通过重启服务器解决了。

- Jadamae77

---

你应该为@Poul Kruijt的评论点赞/发表“谢谢”。 :) - Nowhere Man

我尝试了很多方法，但这个奇怪地解决了我的问题？通常当我生成某些东西或npm安装新包时，应用程序会进入这种状态...但我仍然想了解根本原因。 - Tjad Clark

Answer 2

我在执行单元测试时也遇到了相同的问题。

通过将MatMenuModule导入到TestBed中，问题已解决：

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

- Ievgen

Answer 3

我有过相同的问题 - 关闭终端并重新启动服务器 (ng serve)。

- Naveen Patel

Answer 4

我今天遇到了这个问题，你需要做的就是在当前使用matMenu组件的模块中导入下面这行代码：

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

这行代码会使问题得到解决。

- ninoorta

Answer 5

对我来说，仅仅重新启动ng serve是不够的。直到我从模板中移除了mat-menu指令，重新启动ng serve，然后只是简单地将mat-menu的相关内容添加回模板中，我才摆脱了这个错误。简直疯狂的错误！

- Touré Holder

Answer 6

我在单元测试时遇到了同样的问题，但是在spec文件中导入MatMenuModule后，解决了这个问题。

- Mithilesh Shah

---

你的回答可以在额外提供支持性信息的情况下得到改善。请编辑以添加进一步的细节，例如引用或文献资料，以便其他人可以确认你的答案是正确的。你可以在帮助中心找到更多关于如何撰写良好答案的信息。 - Y. Gherbi

Answer 7

我遇到了同样的错误，重启服务器就解决了！

- Ari