7

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.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
programoholic
  • 4,830
  • 5
  • 20
  • 59
  • Looks like you're trying to import `MaterialModule`, when instead you should be importing the individual items `MdCheckboxModule` or `MdInputModule` etc... – Z. Bagley Sep 27 '17 at 19:46
  • Please read material changelog https://github.com/angular/material2/releases/tag/2.0.0-beta.11 – yurzui Sep 27 '17 at 19:55
  • 2
    Thanks guys... I created a new ngModule which imports all the material components. then Added the module to app.module.ts . Working fine now. :) – programoholic Sep 28 '17 at 09:37

2 Answers2

6

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.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
1

Import the individual modules for Angular material like this 

import { matButtonModule,matCardModule,matMenuModule,matToolbarModule,matIconModule,matSelectModule } from '@angular/material';
shadrack Mwangi
  • 785
  • 6
  • 14