@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 · Answer 1 · 2020-12-08T08:21:34.717

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, Feb 11 '20 at 07: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, Feb 11 '20 at 10:47
Good catch, in my haste I had put MatNativeDateModule in the wrong import :), fixed it in the answer — Jeff Gilliland, Feb 11 '20 at 13:54
Yup, excellent answer, thanks. One question: when they make crucial changes like this, why are the side-effects (like this "'index.d.ts' is not a module" error, when using Angular 9) so hopeless ?!! Is that error meant to mean something to us developers ? — Mike Gledhill, Mar 22 '20 at 13:46
@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, Mar 23 '20 at 12:51
Google didn't provide a tool to automate this upgrade? Developers have to do this manually? — Chris Bao, Mar 31 '20 at 08:27
Thanks for the ready made import. Angular 9 upgrade with breaking changes. I hope this was automated as well. — marknt15, Mar 31 '20 at 16:33
Thanks, I adapted your solution by creating an alias path with all the import needed, have a good day!! — Nicolas, Apr 30 '20 at 15:52
Using this solution I am not able to import these two MatTabsModule and MatTreeModule — Ankur Shah, May 13 '20 at 07:36
This should be the accepted answer as it explains the exact cause and solution. — Jhabar, Jun 02 '20 at 01:49
Note for Angular 10 you'll need to change the forRoot line to `static forRoot(): ModuleWithProviders {` — louisl, Oct 07 '20 at 15:53
@louisl thanks for the catch; updated the answer with the addition of the type! — Jeff Gilliland, Oct 08 '20 at 07:39

ForestG · Accepted Answer · 2020-05-25T09:24:29.643

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

edited May 25 '20 at 09:24

answered Oct 28 '19 at 16:02

ForestG

17,538
14
52
86

6

after doing the downgrade, do the `ng update @angular/material`, it will migrate and update all the imports for you :) – Nicolas May 04 '20 at 08:28

score 100 · Answer 3 · edited Apr 12 '20 at 02:20

100

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 '20 at 02:20

j3ff

5,719
8
38
51

answered Mar 05 '20 at 06:43

Khushbu Raval

1,167
1
6
12

1

Worked for me as well.. Thanks. – sid_bond Mar 31 '20 at 10:37

score 39 · Answer 4 · answered Nov 06 '20 at 14: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.

This worked for me. I have Angular 11.0.2 and Material 11.0.1 Thanks! — Wade H, Nov 29 '20 at 03:11

score 38 · Answer 5 · edited Apr 24 '20 at 22:34

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 '20 at 22:34

Rajan

1,512
2
14
18

answered Apr 24 '20 at 12:28

Владимир

481
4
2

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 https://stackoverflow.com/help/how-to-answer Thank you. Keep contributing – Rajan Apr 24 '20 at 12:32
Hello! While this code may solve the question, [including an explanation](https://meta.stackexchange.com/q/114762) 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 Apr 24 '20 at 13:33
This code is very nice, but it would be nicer if you explain it. Otdelna, Ya ne smog paniat. – Dr. MAF Apr 24 '20 at 14:34
Thanks. Worked well for me! – Umesh Kumar Sharma Sep 09 '20 at 14:14
From the [other answer](https://stackoverflow.com/a/58594324/3705191): "Components can no longer be imported through "@angular/material". Use the individual secondary entry-points, such as @angular/material/button." – Prid Nov 06 '20 at 14:41
Thanks. Worked well for Angular 11. – Nikhil Apr 12 '21 at 11:09

score 24 · Answer 6 · answered May 20 '20 at 07:22

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 '20 at 07:22

Shlok Nangia

2,355
3
16
24

1

Worked for me :) – Naveen Kumar V Jun 12 '20 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 Sep 19 '20 at 00:41

score 12 · Answer 7 · answered Mar 26 '20 at 18:44

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 '20 at 18:44

Ali A

359
3
5

score 5 · Answer 8 · edited Jun 20 '20 at 09:12

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 '20 at 09:12

Community

1
1

answered Apr 30 '20 at 15:51

Nicolas

2,684
1
16
22

score 2 · Answer 9 · answered Mar 23 '20 at 10:09

2

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

answered Mar 23 '20 at 10:09

Sivuyile TG Magutywa

1,041
12
15

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

Just upgraded from 7 to 9, it did fix my imports, actually. – Tobias Stangl Apr 04 '20 at 18:05

jitender singh · Answer 10 · 2020-07-08T11:37:03.437

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 08 '20 at 11:37

answered Jul 08 '20 at 11:26

jitender singh

57
10

score 1 · Answer 11 · answered Apr 21 '20 at 17:38

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 '20 at 17:38

Feargal Kavanagh

11
2

score 0 · Answer 12 · answered Mar 01 '21 at 14:46

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

score 0 · Answer 13 · answered Mar 13 '21 at 19:24

0

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

answered Mar 13 '21 at 19:24

Pritheka Kumar

29
1

score -3 · Answer 14 · answered May 10 '20 at 15:14

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, May 12 '20 at 12:21

score -5 · Answer 15 · edited Mar 11 '20 at 14:44

-5

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

edited Mar 11 '20 at 14:44

Captain Kenpachi

6,960
7
47
68

answered Feb 23 '20 at 10:05

Narendra Sagadevan

63
3

Consider adding more details and the usage of formatted codes – mehrdadep Feb 23 '20 at 11:23

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

15 Answers15

Linked