Unable to Compile Material in Angular 4 , gives :/material" has no exported member 'MaterialModule

Question

I am creating new Angular 4 app using Material UI Framework. I followed the steps given as : https://material.angular.io/guide/getting-started .

But when i am doing 'npm start' , it fails to compile and says : ERROR in /home/programoholic/workspace/heroapp/src/app/app.module.ts (3,10): Module '"/home/programoholic/workspace/heroapp/node_modules/@angular/material/material"' has no exported member 'MaterialModule'.

Error Screenshot :

when compiling getting this error

this is my Package.Json file :

{
  "name": "heroapp",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/cdk": "^2.0.0-beta.11",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.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",
    "core-js": "^2.4.1",
    "hammerjs": "^2.0.8",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.4.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/hammerjs": "^2.0.35",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Please can any body let me know what problem is causing this error ? And what is the best solution for this ? Thanks.

Answer 1

MaterialModule was depreciated in version 2.0.0-beta.3 and it has been removed completely in version 2.0.0-beta.11. See this CHANGELOG for more details. Please go through the breaking changes.

MaterialModule has been removed and is no longer available. As noted in the changelog for beta.3, an aggregate module like MaterialModule prevents tools from being able to treeshake unused components and modules.

You need to include individual material component modules in order to use them in your app.

Answer 2

Import the individual modules for Angular material like this

import { matButtonModule,matCardModule,matMenuModule,matToolbarModule,matIconModule,matSelectModule } from '@angular/material';