ERROR: @angular/material/material has no exported

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

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 2

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

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

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 5

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.

‎