ERROR: @angular/material/material has no exported member 'MdButtonModule'

Question

Error below arose after upgrading from @angular/material 2.0.0-beta.11 to 2.0.0-beta.12:

Module @angular/material/material has no exported member 'MdButtonModule'.

Typescript-code:

import { MdButtonModule } from '@angular/material';

What happened?

ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (4,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdButtonModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (5,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdCardModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (6,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdCheckboxModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (7,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdIconModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (8,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdOptionModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (9,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdProgressSpinnerModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (10,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdSelectModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (11,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdSidenavModule'. ERROR in c:/dev/my-proj/src/app/app-material/app-material.module.ts (12,3): Module '"c:/dev/my-proj/node_modules/@angular/material/material"' has no exported member 'MdToolbarModule'. ERROR in Error: MdButtonModule is not an NgModule at _getNgModuleMetadata (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:140:15) at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:109:26) at c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10) at c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:129:27 at Array.reduce (native) at _extractLazyRoutesFromStaticModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:128:10) at Object.listLazyRoutesOfModule (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_impl.js:53:22) at Function.NgTools_InternalApi_NG_2.listLazyRoutes (c:\dev\my-proj\node_modules\@angular\compiler-cli\src\ngtools_api.js:91:39) at AotPlugin._getLazyRoutesFromNgtools (c:\dev\my-proj\node_modules\@ngtools\webpack\src\plugin.js:207:44) at _donePromise.Promise.resolve.then.then.then.then.then (c:\dev\my-proj\node_modules\@ngtools\webpack\src\plugin.js:443:24)

Answer 1

You have to include MatButtonModule instead of MdButtonModule. You will also have to update the prefix in your template i.e. md-button should now be mat-button. To update the prefix in your entire app, follow the guidelines in this Prefix Updater.

Since 2.0.0-beta.12 the Md prefix has been removed and you should use Mat prefix everywhere. From the CHANGELOG of 2.0.0-beta.11:

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.

And from the CHANGELOG of 2.0.0-beta.12:

Breaking Changes All "md" prefixes have been removed.

See this working StackBlitz demo with individual material modules and using Mat prefix.

‎

Answer 2

Replace import-directive with

import { MatButtonModule } from '@angular/material';

The MdSomethingModule naming-convention was deprecated in beta.11, and in beta.12 it was completely replaced by MatSomethingModule.

Answer 3

Prior to Angular Material 2 Beta 3, there was a global MaterialModule that could be imported in the app module to make the components available. The downside to that is that tree-shaking is not efficient enough to remove all the unused code.

MaterialModule has therefore been deprecated in favor of defining a project-specific custom material module where you import and export only the needed components. Here’s what your module can look like:

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

import {
  MatButtonModule,
  MatMenuModule,
  MatToolbarModule,
  MatIconModule,
  MatCardModule
} from '@angular/material';

@NgModule({
  imports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ],
  exports: [
    MatButtonModule,
    MatMenuModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule
  ]
})
export class MaterialModule {}

You’ll then import this module in the root app module.

Import MaterialModule and add it to your imports. You’ll also need to import the necessary for animations in your module. Your app module (e.g.: app.module.ts) will look a little bit like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MaterialModule } from './material.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MaterialModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

You can find more information on using angular material here https://alligator.io/angular/angular-material-2/

Answer 4

Use Mat prefix instead of Md. For example

import { MatButtonModule, MatCheckboxModule } from '@angular/material'

was working, but import { MdButtonModule, MdCheckboxModule } from '@angular/material' get error

Answer 5

• replace Mat* with Md* for 2.0.0-beta.11
• replace Md* with Mat* see deprecation for 2.0.0-beta.12

Answer 6

Given solutions are for wrong prefix but it can also happen because of version mismatch.

Example

"@angular/core": "^7.1.0"
"@angular/cdk": "^9.0.0",
"@angular/material": "^9.0.0",

Answer 7

Works for me,I put the following line, maybe it can be useful for you.

reference link @angular/material/index.d.ts' is not a module

import { MatButtonModule } from '@angular/material/button';

Answer 8

replace
import { MatButtonModule } from '@angular/material';
with
import { MatButtonModule } from '@angular/material/button';

you need to give a path till the component in the latest(V7+) angular material