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

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

Solution 1:^[1]

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

Solution 2:^[2]

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.

Solution 3:^[3]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Amer
Solution 3	Profira Rusu

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

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]