угловая 7 не может импортировать мат-меню

Question

Я пытаюсь использовать mat-menu в моем Angular приложении.Я получаю сообщение об ошибке

Нет директивы с "exportAs", установленным в "insertGMenu" ("Insert] # insertMenu =" insertGMenu "xPosition =" after "yPosition =" under ">

Вот файл component.html

<mat-toolbar color="secondary">
             <mat-toolbar-row>
                    <button mat-button [matMenuTriggerFor]="insertMenu">Insert</button>
                    <mat-menu #insertMenu="insertGMenu" xPosition="after" yPosition="below">
                      <button mat-menu-item>Portfolio</button>
                      <button mat-menu-item>Item 2</button>
                    </mat-menu>
              </mat-toolbar-row>
</mat-toolbar>

component.ts

import { Component } from '@angular/core';

@Component({
    selector: 'gantt-toolbar',
    templateUrl: './ganttToolBar.component.html',
    styleUrls: ['./ganttToolBar.component.css']
  })


export class GanttToolBar{

    constructor(){

    }
}

модуль приложения

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavBarComponent } from './nav-bar/nav-bar.component';
import { GanttComponent } from './gantt/gantt.component';
import { GanttToolBar } from './gantt/ganttToolBar/ganttToolBar.component';
import { GanttPropertyService} from './services/gantt/ganttPropertyService';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatToolbarModule, MatButtonModule, MatMenuModule, MatIconModule } from '@angular/material';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; 

@NgModule({
  declarations: [
    AppComponent,
    NavBarComponent,
    GanttComponent,
    GanttToolBar,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    ReactiveFormsModule,
    MatMenuModule,
    MatToolbarModule, MatButtonModule, MatIconModule, BrowserAnimationsModule
  ],
  providers: [GanttPropertyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{ "name": "lp-scheduler-client", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "~8.2.8", "@angular/cdk": "~8.2.1", "@angular/common": "~8.2.8", "@angular/compiler": "~8.2.8", "@angular/core": "~8.2.8", "@angular/forms": "~8.2.8", "@angular/material": "^8.2.1", "@angular/platform-browser": "~8.2.8", "@angular/platform-browser-dynamic": "~8.2.8", "@angular/router": "~8.2.8", "bootstrap": "^4.3.1", "dhtmlx-gantt": "file:scripts/thirdParty/dhtmlxGantt", "hammerjs": "^2.0.8", "jquery": "^3.4.1", "popper": "^1.0.1", "rxjs": "~6.4.0", "tslib": "^1.10.0", "zone.js": "~0.9.1" }, "devDependencies": { "@angular-devkit/build-angular": "~0.803.6", "@angular/cli": "~8.3.6", "@angular/compiler-cli": "~8.2.8", "@angular/language-service": "~8.2.8", "@types/node": "~8.9.4", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", "codelyzer": "^5.0.0", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", "karma-chrome-launcher": "~2.2.0", "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", "protractor": "~5.4.0", "ts-node": "~7.0.0", "tslint": "~5.15.0", "typescript": "~3.5.3" } }

Я рассматривал другие вопросы по SO, но ни одно из решений не работает.

Вещи, которые я пробовал

-установка зависимостей -обновление зависимостей-экспорт MatMenuModule

Answer 1

Вам нужно изменить

<mat-menu #insertMenu="insertGMenu" xPosition="after" yPosition="below">

на

<mat-menu #insertMenu="matMenu" xPosition="after" yPosition="below">

В официальном документе описано, что селектор mat-menu экспортируется как matMenu Вы можете проверить это здесь https://material.angular.io/components/menu/api