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

Jeff Gilliland · Accepted Answer · 2020-12-08 08:21:34Z

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 "@angular/core";
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<MaterialModule> {
        return {
            ngModule: MaterialModule,
            providers: [MatIconRegistry]
        };
    }
}

I had same problem after upgrading angular 8 to 9. Your solution worked for me. This should be accepted answer in my opinion because it actually provides a solution for the upgraded version. Downgrading the version 9 back to 8 because of these errors should not be seen as the accepted solution to the problem. Thanks for sharing! — omostan, Commented Feb 11, 2020 at 7:46
the following all come from material/core not angular/core (I guess): import { MAT_LABEL_GLOBAL_OPTIONS, MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core'; — SwissCoder, Commented Feb 11, 2020 at 10:47
Good catch, in my haste I had put MatNativeDateModule in the wrong import :), fixed it in the answer — Jeff Gilliland, Commented Feb 11, 2020 at 13:54
@MikeGledhill like many things in development, many things are esoteric. They should implement a solution that gives a deprecation warning or a more specific error message so you know how to fix it. The only other way that you would know how to fix this is if you have experience working with Typescript & Angular, and you know what the likely issue is when you see an error with a ".d.ts" file type. That knowledge usually comes from hours of frustration...there needs to be a better way of sharing this "domain knowledge" with others! — Jeff Gilliland, Commented Mar 23, 2020 at 12:51
Note for Angular 10 you'll need to change the forRoot line to static forRoot(): ModuleWithProviders<MaterialModule> { — louisl, Commented Oct 7, 2020 at 15:53

ForestG · Accepted Answer · 2020-05-25 09:24:29Z

130

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/[email protected]... to @angular/[email protected] we could solve this temporarily. Guess we need to update the project for a long term solution.

edited May 25, 2020 at 9:24

answered Oct 28, 2019 at 16:02

ForestG

17.9k15 gold badges58 silver badges89 bronze badges

6

after doing the downgrade, do the ng update @angular/material, it will migrate and update all the imports for you :)
– Nicolas
Commented May 4, 2020 at 8:28

Add a comment |

j3ff · Accepted Answer · 2020-04-12 02:20:48Z

101

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

edited Apr 12, 2020 at 2:20

j3ff

5,9498 gold badges41 silver badges54 bronze badges

answered Mar 5, 2020 at 6:43

Khushbu Raval

1,1871 gold badge7 silver badges12 bronze badges

1

Worked for me as well.. Thanks.
– sid_bond
Commented Mar 31, 2020 at 10:37

Add a comment |

Prid · Accepted Answer · 2020-11-06 14:40:06Z

40

❌ 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 "@angular/material". Use the individual secondary entry-points, such as @angular/material/button.

answered Nov 6, 2020 at 14:40

community wiki

Prid

This worked for me. I have Angular 11.0.2 and Material 11.0.1 Thanks!
– Wade H
Commented Nov 29, 2020 at 3:11

Add a comment |

Rajan · Accepted Answer · 2020-04-24 22:34:07Z

38

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

edited Apr 24, 2020 at 22:34

Rajan

1,5682 gold badges14 silver badges18 bronze badges

answered Apr 24, 2020 at 12:28

Владимир

4814 silver badges2 bronze badges

1

Welcome @Владимир on StackOverflow, It would be really helpful for reading if you add language code with ` ` ` (Without space i.e ` ` ` javascript) and close it. for more help please visit stackoverflow.com/help/how-to-answer Thank you. Keep contributing
– Rajan
Commented Apr 24, 2020 at 12:32
Hello! While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.
– Brian61354270
Commented Apr 24, 2020 at 13:33
This code is very nice, but it would be nicer if you explain it. Otdelna, Ya ne smog paniat.
– Dr. MAF
Commented Apr 24, 2020 at 14:34
Thanks. Worked well for me!
– Umesh Kumar Sharma
Commented Sep 9, 2020 at 14:14
From the other answer: "Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button."
– Prid
Commented Nov 6, 2020 at 14:41

| Show 1 more comment

Shlok Nangia · Accepted Answer · 2020-05-20 07:22:22Z

24

@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

answered May 20, 2020 at 7:22

Shlok Nangia

2,3873 gold badges18 silver badges25 bronze badges

1

Worked for me :)
– Naveen Kumar V
Commented Jun 12, 2020 at 18:57
Excelent! import { MatToolbarModule } from '@angular/material/toolbar'; import { MatIconModule } from '@angular/material/icon'; import { MatCardModule } from '@angular/material/card'; import { MatButtonModule } from '@angular/material/button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
– Maximiliano Cesán
Commented Sep 19, 2020 at 0:41

Add a comment |

Ali A · Accepted Answer · 2020-03-26 18:44:24Z

12

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

answered Mar 26, 2020 at 18:44

Ali A

3593 silver badges5 bronze badges

Add a comment |

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

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 :)

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Apr 30, 2020 at 15:51

Nicolas

2,7441 gold badge18 silver badges22 bronze badges

Add a comment |

Sivuyile TG Magutywa · Accepted Answer · 2020-03-23 10:09:19Z

2

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

answered Mar 23, 2020 at 10:09

Sivuyile TG Magutywa

1,22113 silver badges17 bronze badges

This will only update package.json and package-lock.json. Will not change anything in our code
– Joel K Thomas
Commented Apr 2, 2020 at 22:00
2

Just upgraded from 7 to 9, it did fix my imports, actually.
– Tobias
Commented Apr 4, 2020 at 18:05

Add a comment |

jitender singh · Accepted Answer · 2020-07-08 11:37:03Z

2

First try to downgrade your angular version using "ng add @angular/material7.3..0" 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

edited Jul 8, 2020 at 11:37

answered Jul 8, 2020 at 11:26

jitender singh

571 silver badge10 bronze badges

Add a comment |

Feargal Kavanagh · Accepted Answer · 2020-04-21 17:38:13Z

1

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

answered Apr 21, 2020 at 17:38

Feargal Kavanagh

112 bronze badges

Add a comment |

Aditya · Accepted Answer · 2021-03-01 14:46:36Z

0

This issue still persists for Angular 11 to add commands

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatButtonModule } from '@angular/material/button';

Solved it for now. But shortcuts for ng add @angular material should be available via Angular CLI

answered Mar 1, 2021 at 14:46

Aditya

771 gold badge2 silver badges12 bronze badges

Add a comment |

Pritheka Kumar · Accepted Answer · 2021-03-13 19:24:28Z

0

I faced the same issue with angular version 11. Downgrading angular/material version works

answered Mar 13, 2021 at 19:24

Pritheka Kumar

291 bronze badge

Add a comment |

Bhavesh Garg · Accepted Answer · 2020-05-10 15:14:26Z

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

If you do not want to do that then you will have to specifically mention the complete path of the module you want to import and in near future if we get an update where we can directly access the module then changing the import statements where ever you have mentioned it will be a tediuos task. Also if you import the module with complete path you will have a very long code, but if you change the index file you can import everything in a single statement. Alternate option is:- you can create a .ts file somewhere outside the node_modules folder and paste this code there and import that file. — Bhavesh Garg, Commented May 12, 2020 at 12:21

Captain Kenpachi · Accepted Answer · 2020-03-11 14:44:39Z

-5

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

edited Mar 11, 2020 at 14:44

Captain Kenpachi

7,0657 gold badges49 silver badges69 bronze badges

answered Feb 23, 2020 at 10:05

Narendra Sagadevan

633 bronze badges

Consider adding more details and the usage of formatted codes
– mehrdadep
Commented Feb 23, 2020 at 11:23

Add a comment |

Collectives™ on Stack Overflow

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

15 Answers 15

Not the answer you're looking for? Browse other questions tagged
angular
angular-material
or ask your own question.

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

Not the answer you're looking for? Browse other questions tagged angularangular-material or ask your own question.

Linked

Related

Not the answer you're looking for? Browse other questions tagged
angular
angular-material
or ask your own question.