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"
}
}

Answer 1

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">

Answer 2

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

Answer 3

Change to,

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

DEMO

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

• 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") {
                    
                  }
                });
        }

Answer 10

Please check Angular Getting started :)

1. Install Angular Material and Angular CDK
2. Animations - if you need
3. Import the component modules

and enjoy the {{Angular}}