Has no exported member 'MdCardModule' and 'MdTooltipModule'

4
votes

When I run ng build It shows some errors:

ERROR in C:/761/search- bar/workload_management_app/Client/src/app/app.module.ts (8,9): Module '"C:/761/search- bar/workload_management_app/Client/node_modules/@angular/materia l/material"' has no exported member 'MdCardModule'.

ERROR in C:/761/search- bar/workload_management_app/Client/src/app/app.module.ts (8,23): Module '"C:/761/search- bar/workload_management_app/Client/node_modules/@angular/material/material"' has no exported member 'MdTooltipModule'.

ERROR in MdCardModule is not an NgModule

ERROR in C:/761/search- bar/workload_management_app/Client/src/app/app.module.ts (8,9): Module '"C:/761/search- bar/workload_management_app/Client/node_modules/@angular/material/materia l"' has no exported member 'MdCardModule'.

ERROR in C:/761/search- bar/workload_management_app/Client/src/app/app.module.ts (8,23): Module '"C:/761/search- bar/workload_management_app/Client/node_modules/@angular/material/materi al"' has no exported member 'MdTooltipModule'.

package.json

  "version": "0.0.0",
...
  "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": "github:angular/material2-builds",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.2",
    "angular-numeric-directive": "^1.0.0",
    "angular2-busy": "^2.0.4",
    "bootstrap": "^4.0.0-beta",
    "core-js": "^2.4.1",
    "jquery": "^3.2.1",
    "ng2-drag-drop": "^2.6.0",
    "ng2-dragula": "^1.5.0",
    "ngx-bootstrap": "^1.9.3",
    "popper.js": "^1.12.5",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"

How can I solve this problem, could anyone help me?

PS: I tried to run npm install --save @angular/material before, but it didn't work.

4
angularnpmfrontendangular-clinpm-install
Try to delete node_modules directory and package-lock.json and run npm install. Then try building again. - Catalyst
Thank you, I tried what you said, but still have the same problem - Brent
I'm having the same issue now. - Eugenia Kim

4 Answers

6
votes

The reason is because you are using MdCardModule but it should be MatCardModule since material 2.0.0-beta.11. Change the Md to Mat for all the imported modules. This is quite confusing since it was changed almost 3 weeks ago, but even the official get started documentation still uses the Md style which is no longer working.

From the beta.11 changelog:

For beta.11, we've made the decision to deprecate the "md" prefix completely and use "mat" moving forward. This affects all class names, properties, inputs, outputs, and selectors (CSS classes were changed back in February). The "md" prefixes will be removed in the next beta release.

1
votes

The problem is with your angular version. Update your angular version to 4.4.3 or greater. Material 2.0.0-beta.11 depends on 4.4.3 or greater. From the [CHANGELOG][1] documentation:

Breaking changes Angular Material now requires Angular 4.4.3 or greater

0
votes

You have to import each material component you want to use If you are using angular cli then you can import them globally in app.module.ts something like

import { MdCardModule, MdTooltipModule} from '@angular/material';

  imports: [MdCardModule, MdTooltipModule]
0
votes

From the angular material changelog:

Deprecation of "md" prefix.

In earlier betas, we've had a compatibility mode that allowed people to use either "md" or "mat" as the selector for Angular Material components. This was created so that these components could live side-by-side with AngularJS Material without CSS from the two libraries colliding.

For beta.11, we've made the decision to deprecate the "md" prefix completely and use "mat" moving forward. This affects all class names, properties, inputs, outputs, and selectors (CSS classes were changed back in February). The "md" prefixes will be removed in the next beta release.

You can automatically update your projects with the angular-material-prefix-updater tool. Check out the tool's page for instructions on how to run.

The good news is there is a migration tool from beta 11 to beta 12:

Tried it and it works fine.