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

Admin 1
Viewed 25680

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

angular12 angular-material angular typescript
4 Answers

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

user_57062930

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.

user_151596030

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

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].

user_167063270
Related