Error : Module '"@angular/material"' has no exported member "..."

Question

i create a custom Angular material module, material.module.ts file and import the following Angular material UI components in this file like given below.

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

import {
   MatButtonModule,
   MatToolbarModule,
   MatIconModule,
   MatBadgeModule,
   MatSidenavModule,
   MatListModule,
   MatGridListModule,
   MatFormFieldModule,
   MatInputModule,
   MatSelectModule,
   MatRadioModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatChipsModule,
   MatTooltipModule,
   MatTableModule,
   MatPaginatorModule
} from '@angular/material';

@NgModule({
   imports: [
      CommonModule,
      MatButtonModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatBadgeModule,
      MatListModule,
      MatGridListModule,
      MatFormFieldModule,
      MatInputModule,
      MatSelectModule,
      MatRadioModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatChipsModule,
      MatTooltipModule,
      MatTableModule,
      MatPaginatorModule
   ],
   exports: [
      MatButtonModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatBadgeModule,
      MatListModule,
      MatGridListModule,
      MatInputModule,
      MatFormFieldModule,
      MatSelectModule,
      MatRadioModule,
      MatDatepickerModule,
      MatChipsModule,
      MatTooltipModule,
      MatTableModule,
      MatPaginatorModule
   ],
   providers: [
      MatDatepickerModule,
   ]
})

export class AngularMaterialModule { }

And import the AngularMaterialModule to app.module.ts file but i have this error :

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

Hi and welcome. Could you provide a full sample error message, where the missing exported member is visible? How did you import your custom material module? — Benjamin Schäublin, Sep 10 '21 at 16:52
It is better to import the material modules that you needed for the custom module that you are working on. It can improve your code. — JsNgian, Sep 10 '21 at 17:14

eko · Answer 1 · 2021-11-09T08:09:22.110

You have probably updated your angular and/or angular material versions; with the angular material 9 upgrade 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.

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

score 16 · Answer 2 · answered Sep 10 '21 at 20:06

From Angular Material v9, each module should be imported from a separated path, e.g:

import { MatAutocompleteModule } from '@angular/material/autocomplete';

If you updated your Angular app using ng update (it's recommended to update Angular using ng update, but it's not recommended to move across multiple major versions, see here for more details), it will be migrated automatically, and you don't need to do anything regarding the import.

score 5 · Answer 3 · answered Jun 30 '22 at 08:47

you have probably updated your angular and/or angular material versions; with the angular material 9 upgrade they changed the way we import material modules in the .ts files. Previously , for every specific import of a material module like MatButtonModule,MatToolbarModule,MatIconModule,MatSidenavModule,MatBadgeModule, MatListModule,MatGridListModule,MatInputModule,MatFormFieldModule,MatSelectModule,MatRadioModule,MatDatepickerModule,MatChipsModule,MatTooltipModule,MatTableModule, MatPaginatorModule, (examples) we are importing in this structure

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

with update of Angular/ Angular material we are importing through a specific module to avoid loading of the entire material module which effects the performance and bundle size , with latest versions we are importing a specific module

import {MatToolbarModule} from '@angular/material/toolbar';

score 0 · Answer 4 · answered Feb 10 '22 at 08:14

I want to use a stepper from Angular Material. The same error as yours was displayed. I used the following code in app.module.js: import { MatStepperModule } from '@angular/material/stepper';. In my case, "/stepper" was missing. And in imports [MatStepperModule].

score 0 · Answer 5 · edited Oct 18 '22 at 08:35

0

Try adding import {MatToolbarModule} from '@angular/material/toolbar'; in app.module.ts.

edited Oct 18 '22 at 08:35

pigrammer

2,603
1
11
24

answered Oct 11 '22 at 08:51

Allie Moosa

422
1
4
12

Error : Module '"@angular/material"' has no exported member "..."

5 Answers5