Home / Questions / 136341
Accepted
userStack
Asked: 2020-02-06 08:33:44 +0800 CST 2020-02-06 08:33:44 +0800 CST

Use material library with angular

  • 772

I am trying to useangular-material 

<mat-menu #menu="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item disabled>
    <mat-icon>voicemail</mat-icon>
    <span>Check voicemail</span>
  </button>
  <button mat-menu-item>
    <mat-icon>notifications_off</mat-icon>
    <span>Disable alerts</span>
  </button>
</mat-menu>

But I get error:

There is no directive with "exportAs" set to "matMenu"

The versions of my project:

  __ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(_)
 / _` || '_ \  / _` || | | || | / _` || '__|_____  / __|| || |
| (_| || | | || (_| || |_| || || (_| || |  |_____|| (__ | || |
 \__,_||_| |_| \__, | \__,_||_| \__,_||_|          \___||_||_|
               |___/
angular-cli: 1.0.0-beta.28.3
node: 6.11.4
os: win32 x64
@angular/animations: 5.2.3
@angular/cdk: 5.1.1
@angular/common: 5.2.3
@angular/compiler: 5.2.3
@angular/core: 5.2.3
@angular/forms: 5.2.3
@angular/http: 5.2.3
@angular/material: 5.1.1
@angular/platform-browser: 5.2.3
@angular/platform-browser-dynamic: 5.2.3
@angular/router: 5.2.3
@angular/cli: 1.6.7
@angular/compiler-cli: 5.2.3
@angular/language-service: 5.2.3
angular5

1 Answers

  1. Best Answer

    Update the package.json with the latest versions:

    "dependencies": {
    "@angular/animations": "^4.4.4",
    "@angular/cdk": "^2.0.0-beta.11",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.4.4",
    "@angular/core": "^4.4.4",
    "@angular/forms": "^4.4.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "^2.0.0-beta.11",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "angular-2-local-storage": "^1.0.1",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "intl": "^1.2.5",
    "md5-file": "^3.2.3",
    "rxjs": "^5.4.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.18"
},
"devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.4.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-phantomjs-launcher": "^1.0.4",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.7.0",
    "typescript": "~2.3.3"
}

    Reference: https://github.com/angular/material2/issues/7306

    • 2