angularangular-materialangular-material2

Reputation: 13231

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

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)

Upvotes: 16

Answers (12)

Sandeep Patel

Reputation: 2507

If you use @angular/material you are in for some big breaking changes. There is no more MaterialModule. The idea being, you import what you need, if all I need is a button then import button only. Regarding the first problem, a simple fix is to import component from the respected module as below.

import { MatCommonModule, MatRippleModule } from '@angular/material/core';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatRadioButton } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSliderModule } from '@angular/material/slider';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatListModule } from '@angular/material/list';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatInputModule } from '@angular/material/input';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTabsModule } from '@angular/material';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatMenuModule } from '@angular/material/menu';
import { MatDialogModule } from '@angular/material/dialog';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatExpansionPanel } from '@angular/material';
import { MatTableModule } from '@angular/material/table';
import { MatSortModule } from '@angular/material/sort';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatStepperModule } from '@angular/material/stepper';

if you want to get your application running quickly again, this is a good way out. And then, your individual apps can choose to import exactly what they need as a subset of the above imports.

Upvotes: 3

sensorario

Reputation: 21668

In general, whenever something has no exported member take a look in your node_modules folder. I got your same problem, but with MatSidenavModule. First of all I can find that module is inside folder:

/node_modules/@angular/material/sidenav/sidenav-module.d.ts

This way you can see installed module. The file contains, ...

import * as ɵngcc0 from '@angular/core';
import * as ɵngcc1 from './drawer';
import * as ɵngcc2 from './sidenav';
import * as ɵngcc3 from '@angular/common';
import * as ɵngcc4 from '@angular/material/core';
import * as ɵngcc5 from '@angular/cdk/platform';
import * as ɵngcc6 from '@angular/cdk/scrolling';
export declare class MatSidenavModule {
    static ɵfac: ɵngcc0.ɵɵFactoryDeclaration<MatSidenavModule, never>;
    static ɵmod: ɵngcc0.ɵɵNgModuleDeclaration<MatSidenavModule, [typeof ɵngcc1.MatDrawer, typeof ɵngcc1.MatDrawerContainer, typeof ɵngcc1.MatDrawerContent, typeof ɵngcc2.MatSidenav, typeof ɵngcc2.MatSidenavContainer, typeof ɵngcc2.MatSidenavContent], [typeof ɵngcc3.CommonModule, typeof ɵngcc4.MatCommonModule, typeof ɵngcc5.PlatformModule, typeof ɵngcc6.CdkScrollableModule], [typeof ɵngcc6.CdkScrollableModule, typeof ɵngcc4.MatCommonModule, typeof ɵngcc1.MatDrawer, typeof ɵngcc1.MatDrawerContainer, typeof ɵngcc1.MatDrawerContent, typeof ɵngcc2.MatSidenav, typeof ɵngcc2.MatSidenavContainer, typeof ɵngcc2.MatSidenavContent]>;
    static ɵinj: ɵngcc0.ɵɵInjectorDeclaration<MatSidenavModule>;
}

//# sourceMappingURL=sidenav-module.d.ts.map

And the important thing here is the following:

export declare class MatSidenavModule {

This means the file module is present and MUST work. Finally you can import the module:

import { MatSidenavModule } from '@angular/material/sidenav';

... respecting the path you got watching node_modules. This way you can solve the problem of not exported members for all angular version.

Upvotes: 0

allan-g

Reputation: 1

Below shows how you should declare your import statements:

import { MatButtonModule } from "@angular/material/button"
import { MatIconModule }   from "@angular/material/icon"
import { MatInputModule }  from "@angular/material/input"

From the above statement, you can see the pattern of what module is declared to what folder. Also, you can figure this out by just searching the module under your module folders:

 /node-modules/@angular/material/button
 /node-modules/@angular/material/icon
 /node-modules/@angular/material/input

Upvotes: 0

eko

Reputation: 40677

For angular material v9 and above

They changed the imports from @angular/material notation to @angular/material/button like notation.

Instead of importing from @angular/material, you should import deeply from the specific component. E.g. @angular/material/button. ng update will do this automatically for you.

Before:

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

After:

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

You can follow the upgrade guide from this link: https://update.angular.io/?v=8.0-9.0

Upvotes: 5

Raj Kumar

Reputation: 21

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

Upvotes: 0

Murilo Eduardo

Reputation: 53

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';

Upvotes: 2

Sandeep Gupta

Reputation: 7250

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",

Upvotes: 0

mani R

Reputation: 361

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

Upvotes: 0

Володимир Заплатинський

Reputation: 21

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

Upvotes: 2

FAISAL

Reputation: 34693

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.

‎

Upvotes: 13

Uche Azinge

Reputation: 692

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/

Upvotes: 2

Frederik Struck-Schøning

Reputation: 13231

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.

Upvotes: 3

ERROR: @angular/material/material has no exported member &#39;MdButtonModule&#39;

Answers (12)

Related Questions

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