can not find module "@angular/material"

Question

I'm using Angular 2. When I'm trying to import "@angular/material" i'm getting error for this. I'm importing packages like:

import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";

My tsconfig.json file like:

{
 "compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
  "../node_modules/@types"
]
}
}

My package.json code:

{
 "name": "rmc-temporary",
 "version": "0.0.0",
 "license": "MIT",
 "angular-cli": {},
 "scripts": {
   "start": "ng serve",
   "lint": "tslint \"src/**/*.ts\"",
   "test": "ng test",
   "pree2e": "webdriver-manager update",
   "e2e": "protractor"
 },
 "private": true,
 "dependencies": {
 "@angular/common": "2.2.1",
 "@angular/compiler": "2.2.1",
 "@angular/core": "2.2.1",
 "@angular/forms": "2.2.1",
 "@angular/http": "2.2.1",
 "@angular/platform-browser": "2.2.1",
 "@angular/platform-browser-dynamic": "2.2.1",
 "@angular/router": "3.2.1",
 "core-js": "^2.4.1",
 "rxjs": "5.0.0-beta.12",
 "ts-helpers": "^1.1.1",
 "zone.js": "^0.6.23"
},
"devDependencies": {
 "@angular/compiler-cli": "2.2.1",
 "@types/jasmine": "2.5.38",
 "@types/node": "^6.0.42",
 "angular-cli": "1.0.0-beta.21",
 "codelyzer": "~1.0.0-beta.3",
 "jasmine-core": "2.5.2",
 "jasmine-spec-reporter": "2.5.0",
 "karma": "1.2.0",
 "karma-chrome-launcher": "^2.0.0",
 "karma-cli": "^1.0.1",
 "karma-jasmine": "^1.0.2",
 "karma-remap-istanbul": "^0.2.1",
 "protractor": "4.0.9",
 "ts-node": "1.2.1",
 "tslint": "3.13.0",
 "typescript": "~2.0.3",
 "webdriver-manager": "10.2.5"
}
}

For some reason you have no `@angular/material` in your `package.json`. That could be the problem. — ForNeVeR, Dec 14 '16 at 10:31
I tried to add @angular/material in package.json file, but still getting error. — Anil Jagtap, Dec 14 '16 at 10:33
Did you do an `npm install` in cmd after adding `@angular/material`? — eko, Dec 14 '16 at 10:42
I added "@angular/material":"2.2.1" in package.json, and then I fired "npm install" command. After fired this command I got first error like this "npm ERR! Windows_NT 6.3.9600" — Anil Jagtap, Dec 14 '16 at 10:56
The latest version is 2.0.0-alpha.11-3."@angular/material": "2.0.0-alpha.11-3", — Yong, Dec 14 '16 at 12:22
I did this import: **import { MatInputModule, MatPaginatorModule, MatProgressSpinnerModule, MatSortModule, MatTableModule, MaterialModule } from '@angular/material';** I'm getting an error in this line: ** '@angular/material'**. How can i solve? — pnet, Jul 03 '18 at 13:07
I got. Now is working in my project. I reinstaled and worked. Yesterday i tried to install this way: **npm install g @angular/material --save** and didn't work. Today i removed **g** and i got to work. — pnet, Jul 03 '18 at 13:37

score 107 · Accepted Answer · edited Apr 30 '18 at 07:26

Follow these steps to begin using Angular Material.

Step 1: Install Angular Material

npm install --save @angular/material

Step 2: Animations

Some Material components depend on the Angular animations module in order to be able to do more advanced transitions. If you want these animations to work in your app, you have to install the @angular/animations module and include the BrowserAnimationsModule in your app.

npm install --save @angular/animations

Then

import {BrowserAnimationsModule} from '@angular/platform browser/animations';

@NgModule({
...
  imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }

Step 3: Import the component modules

Import the NgModule for each component you want to use:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
 })
 export class PizzaPartyAppModule { }

be sure to import the Angular Material modules after Angular's BrowserModule, as the import order matters for NgModules

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MdCardModule} from '@angular/material';
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MdCardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Step 4: Include a theme

Including a theme is required to apply all of the core and theme styles to your application.

To get started with a prebuilt theme, include the following in your app's index.html:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

which version of material exports mdcardmodule ? I need version of material. can you Please mention in npm install command ? — Mayur Kukadiya, Jul 06 '20 at 07:27
slight correction: import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; — Jay, Apr 26 '22 at 14:37

score 14 · Answer 2 · answered Jan 31 '18 at 12:51

14

That's what solved this problem for me.

I used:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

but INSIDE THE APPLICATION'S FOLDER.

Source: https://medium.com/@ismapro/first-steps-with-angular-cli-and-angular-material-5a90406e9a4

answered Jan 31 '18 at 12:51

Cap Barracudas

2,347
4
23
54

1

Perfect as anyone would have wanted. – Mihir Bhatt Jun 29 '19 at 15:21

score 4 · Answer 3 · answered Dec 14 '16 at 10:29

4

Change to,

import {MaterialModule} from '@angular/material';

DEMO

answered Dec 14 '16 at 10:29

Sajeetharan

216,225
63
350
396

I tried to import like above statement. Its not working for me. – Anil Jagtap Dec 14 '16 at 11:04
@ritesh what is the issue? – Sajeetharan May 15 '17 at 05:39
It is unable to find the '@angular/material' – May 16 '17 at 06:32
1

Why is this the case? – Steven Jul 31 '17 at 11:15
1

How come this has been marked an Answer where angular team made an announced in 2016 that material component is not yet ready. https://stackoverflow.com/questions/33181745/cannot-find-module-angular2-material-material another link https://github.com/angular/angular/issues/4612 – TheKingPinMirza Aug 04 '17 at 10:24
I have a walkthrough for these issues. Have a look at: http://www.heavyweightsoftware.com/blog/how-to-use-tabs-with-angular-5/ – Thom Jan 23 '18 at 08:26

score 4 · Answer 4 · edited Jun 14 '21 at 07:24

step 1: npm install @angular/material
step 2: import {MatDialogModule} from "@angular/material/dialog";
step 3: after import to app module :

    @NgModule({
      imports: [
        CommonModule,
        MatDialogModule
       ]

step 4: import on component: import { MatDialog} from '@angular/material/dialog';
step 5: use popup dialog

    showPopup(Id){
            this.matDialog.open(PopupComponent, {
                disableClose: true,
                width: "1200px",
                data: {
                  Title: "im vuong le - dev VietNam",
                  sepId:Id,
                  Message: "test-dialog,
                },
              })
                .afterClosed()
                .subscribe((result) => {
                  if (result == "Yes") {
                    
                  }
                });
        }

Hi, Welcome to Stack Overflow. As explained in the [tour], this site is a repository of useful questions and their answers. Your answer is very similar to [this answer](https://stackoverflow.com/a/44156815/1289713), and not very useful since it does not add any new value or information. Please avoid writing duplicate answers. Either edit your answer to add value or delete it altogether; this will ensure all questions and answers on the site remain useful and not scattered/duplicated. — Vimal Patel, Jun 14 '21 at 05:53

Mike Gledhill · Answer 5 · 2019-01-27T15:40:39.883

I followed each of the suggestions here (I'm using Angular 7), but nothing worked. My app refused to acknowledge that @angular/material existed, so it showed an error on this line:

import { MatCheckboxModule } from '@angular/material';

Even though I was using the --save parameter to add Angular Material to my project:

npm install --save @angular/material @angular/cdk

...it refused to add anything to my "package.json" file.

I even tried deleting the package-lock.json file, as some articles suggest that this causes problems, but this had no effect.

To fix this issue, I had to manually add these two lines to my "package.json" file.

{
    "devDependencies": {
        ...
        "@angular/material": "~7.2.2",
        "@angular/cdk": "~7.2.2",
        ...

What I can't tell is whether this is an issue related to using Angular 7, or if it's been around for years....

score 1 · Answer 6 · answered Feb 19 '20 at 02:10

1

Found this post: "Breaking changes" in angular 9. All modules must be imported separately. Also a fine module available there, thanks to @jeff-gilliland: https://stackoverflow.com/a/60111086/824622

answered Feb 19 '20 at 02:10

Erik

1,779
1
16
8

score 1 · Answer 7 · edited Mar 21 '20 at 21:00

1

import {MatButtonModule} from '@angular/material/button';

edited Mar 21 '20 at 21:00

Dharman

30,962
25
85
135

answered Mar 21 '20 at 20:12

morteza.marivani

41
4

Akshit Chaprot · Answer 8 · 2021-05-04T19:36:00.753

0

Simply use [ng add @angular/material][1] and yes to add animation and add to environment. You can also select an Angular Material Theme. This single command will add all dependencies and declarations required. Refer Angular Material Guide Getting Started

edited May 04 '21 at 19:36

answered May 04 '21 at 19:24

Akshit Chaprot

1
4

score 0 · Answer 9 · answered Aug 09 '21 at 07:42

Non of these answers works for me. Since I have previous experiences with not working node modules when I am working with reactjs I have removed my node_modules folder and do a npm install again. Then instead of using import { MatTableModule } from '@angular/material' I have import module import { MatTableModule } from '@angular/material/table' like this. This works for me:-).

score -3 · Answer 10 · edited Jun 08 '18 at 07:50

-3

Please check Angular Getting started :)

Install Angular Material and Angular CDK
Animations - if you need
Import the component modules

and enjoy the {{Angular}}

edited Jun 08 '18 at 07:50

Anshuman Jaiswal

5,352
1
29
46

answered Jun 08 '18 at 07:32

Milad

7
1
3

can not find module "@angular/material"

10 Answers10

Linked