angular material index d ts is not a module

Question

With Angular 8  While building the app  we encounter the following error   app modules admin-module pages editor editor component ts 6 27 - error TS2306   File    node modules  angular material index d ts  is not a module

User · Answer

This can be solved by writing full path  for example if you want to include MatDialogModule follow   Prior to  angular material 9 x x  import   MatDialogModule   from   angular material     leading to error mentioned   As per  angular material 9 x x  import   MatDialogModule   from   angular material dialog     works fine       Official change log breaking change reference  https   github com angular components blob master CHANGELOG md material-9

User · Answer

angular material has changed its folder structure  Now you need to use all the modules from their respective folders instead of just material folder  For example   import   MatDialogModule   from   angular material     has now changed to   import   MatDialogModule   from   angular material dialog     You can check the following to find the correct path for your module  https   material angular io components categories  Just navigate to the API tab of required module and find the correct path like this

User · Answer

import   MatDialogModule   from   angular material dialog   import   MatTableModule   from   angular material table   import   MatFormFieldModule   from   angular material form-field   import   MatInputModule   from   angular material input   import   MatButtonModule   from   angular material button

User · Answer

DO NOT     old code that breaks import   MatDialogModule    MatInputModule    MatButtonModule  from   angular material      DO     new code that works import   MatDialogModule   from   angular material dialog   import   MatInputModule   from   angular material input   import   MatButtonModule   from   angular material button      Because   Components can no longer be imported through  quot  angular material quot   Use the individual secondary entry-points  such as  angular material button

User · Answer

Do npm i -g  angular material --save to solve the problem

User · Answer

After upgrading to Angular 9  released today   I ran into this issue as well and found that they made the breaking change mentioned in the answer  I can t find a reason for why they made this change  I have a material module ts file that I import   export all the material components  not the most efficient  but useful for quick development   I went through and updated all my imports to the individual material folders  although an index ts barrel might be better  Again  not sure why they made this change  but I m guessing it has to do with tree-shaking efficiencies  Including my material module ts below in case it helps anyone  it s inspired off other material modules I ve found  NOTE  As other blog posts have mentioned and from my personal experience  be careful when using a shared module like below  I have 5  different feature modules  lazy loaded  in my app that I imported my material module into  Out of curiosity  I stopped using the shared module and instead only imported the individual material components each feature module needed  This reduced my bundle size quite a bit  almost a 200kb reduction  I assumed that the build optimization process would properly drop any component not used by my modules  but it doesn t seem to be the case       material module ts import   ModuleWithProviders  NgModule  from  quot  angular core quot   import   MAT LABEL GLOBAL OPTIONS  MatNativeDateModule  MAT DATE LOCALE   from   angular material core   import   MatIconRegistry   from   angular material icon   import   MatAutocompleteModule   from   angular material autocomplete   import   MatBadgeModule   from   angular material badge   import   MatButtonModule   from   angular material button   import   MatButtonToggleModule   from   angular material button-toggle   import   MatCardModule   from   angular material card   import   MatCheckboxModule   from   angular material checkbox   import   MatChipsModule   from   angular material chips   import   MatStepperModule   from   angular material stepper   import   MatDatepickerModule   from   angular material datepicker   import   MatDialogModule   from   angular material dialog   import   MatExpansionModule   from   angular material expansion   import   MatFormFieldModule   from   angular material form-field   import   MatGridListModule   from   angular material grid-list   import   MatIconModule   from   angular material icon   import   MatInputModule   from   angular material input   import   MatListModule   from   angular material list   import   MatMenuModule   from   angular material menu   import   MatPaginatorModule   from   angular material paginator   import   MatProgressBarModule   from   angular material progress-bar   import   MatProgressSpinnerModule   from   angular material progress-spinner   import   MatRadioModule   from   angular material radio   import   MatRippleModule   from   angular material core   import   MatSelectModule   from   angular material select   import   MatSidenavModule   from   angular material sidenav   import   MatSliderModule   from   angular material slider   import   MatSlideToggleModule   from   angular material slide-toggle   import   MatSnackBarModule   from   angular material snack-bar   import   MatSortModule   from   angular material sort   import   MatTableModule   from   angular material table   import   MatTabsModule   from   angular material tabs   import   MatToolbarModule   from   angular material toolbar   import   MatTooltipModule   from   angular material tooltip   import   MatTreeModule   from   angular material tree     NgModule       imports            MatAutocompleteModule          MatBadgeModule          MatButtonModule          MatButtonToggleModule          MatCardModule          MatCheckboxModule          MatChipsModule          MatStepperModule          MatDatepickerModule          MatDialogModule          MatExpansionModule          MatFormFieldModule          MatGridListModule          MatIconModule          MatInputModule          MatListModule          MatMenuModule          MatPaginatorModule          MatProgressBarModule          MatProgressSpinnerModule          MatRadioModule          MatRippleModule          MatSelectModule          MatSidenavModule          MatSliderModule          MatSlideToggleModule          MatSnackBarModule          MatSortModule          MatTableModule          MatTabsModule          MatToolbarModule          MatTooltipModule          MatTreeModule          MatNativeDateModule            exports            MatAutocompleteModule          MatBadgeModule          MatButtonModule          MatButtonToggleModule          MatCardModule          MatCheckboxModule          MatChipsModule          MatStepperModule          MatDatepickerModule          MatDialogModule          MatExpansionModule          MatFormFieldModule          MatGridListModule          MatIconModule          MatInputModule          MatListModule          MatMenuModule          MatPaginatorModule          MatProgressBarModule          MatProgressSpinnerModule          MatRadioModule          MatRippleModule          MatSelectModule          MatSidenavModule          MatSliderModule          MatSlideToggleModule          MatSnackBarModule          MatSortModule          MatTableModule          MatTabsModule          MatToolbarModule          MatTooltipModule          MatTreeModule          MatNativeDateModule            providers                  export class MaterialModule       constructor public matIconRegistry  MatIconRegistry               matIconRegistry registerFontClassAlias  fontawesome    fa               static forRoot    ModuleWithProviders lt MaterialModule gt            return               ngModule  MaterialModule              providers   MatIconRegistry

User · Answer

Just update  angular material from 7 to 9   npm uninstall  angular material --save npm install  angular material  7 1 0 --save ng update  angular material  Just wait and see Angular doing the Migration alone  Hope it helps someone

User · Answer

I was also facing the same issue with the latest version of  angular material i e    9 2 3  So I found out a solution of this  If you go to the folder of  angular material inside node modules  you can find a file naming index d ts  in that file paste the below code  With this change in the index file you will be able to import the modules using import statements from  angular material directly   P S  If you face error in any of the below statements please comment that    export   from   angular material core   export   from   angular material icon   export   from   angular material autocomplete   export   from   angular material badge   export   from   angular material bottom-sheet   export   from   angular material button   export     from    angular material button-toggle   export     from    angular material card   export     from    angular material checkbox   export     from    angular material chips   export     from    angular material stepper   export     from    angular material datepicker  export     from    angular material dialog   export     from    angular material divider   export   from   angular material esm2015   export   from    angular material form-field   export     from    angular material esm5   export     from    angular material expansion   export     from    angular material grid-list   export     from    angular material icon   export     from    angular material input   export     from    angular material list   export     from    angular material menu   export     from    angular material paginator   export     from    angular material progress-bar   export     from    angular material progress-spinner   export     from    angular material radio   export     from    angular material stepper   export     from    angular material select   export     from    angular material sidenav   export     from    angular material slider   export     from    angular material slide-toggle   export     from    angular material snack-bar   export     from    angular material sort   export     from    angular material table   export     from    angular material tabs   export     from    angular material toolbar   export     from    angular material tooltip   export     from    angular material tree

User · Answer

Components cannot be further  From Angular 9  imported through general directory  you should add a specified component path like  import    from   angular material      import    from   angular material input

User · Answer

First try to downgrade your angular version using  quot ng add  angular material7 3  0 quot  after that check if the error is gone in my case it is gone after that use this ng update  angular material in case you are using angular 9 or 10 you have to write code like this import  MatInputModule  from  angular material input  Hope it will work for you

User · Answer

And also ng update  angular material will update your code and fix all imports

User · Answer

update  please check the answer of Jeff Gilliland below for updated solution  Seems like as this thread says a breaking change was issued      Components can no longer be imported through   angular material   Use   the individual secondary entry-points  such as    angular material button    Update  can confirm  this was the issue  After downgrading  angular material 9 0    to   angular material 7 3 2 we could solve this temporarily  Guess we need to update the project for a long term solution

User · Answer

Accepted Answer is correct  but it didn t fully work for me  I had to delete the package lock file  re-run  npm install   and then close and reopen my visual studio  Hope this helps someone

[angular] @angular/material/index.d.ts' is not a module

Examples related to angular

Examples related to angular-material