@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: 
Fil         


        

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

@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

Answer 5

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

Answer 6

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