Cannot find module "@ angular / material"

Question

I am using Angular 2. When I try to import "@ angular / material", I get an error for this. I import packages, for example:

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

My tsconfig.json file, for example:

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

Change to,

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

Demo

Answer 2

Follow these steps to start using corner material.

Step 1: Install the corner material

 npm install --save @angular/material 

Step 2: Animation

Some Material components depend on the Angular animations module to be able to perform more complex transitions. If you want these animations to work in your application, you must install the @angular/animations module and include the BrowserAnimationsModule module in your application.

 npm install --save @angular/animations 

then

 import {BrowserAnimationsModule} from '@angular/platform browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class PizzaPartyAppModule { } 

Step 3: Import Component Modules

Import the NgModule module for each component that 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 the Angular BrowserModule, since the import order matters to 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. Turn on the theme

Inclusion of the theme is necessary to apply all the basic styles and styles of the theme to your application.

To get started with a pre-created theme, include the following in the index.html file:

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

Answer 3

That solved this problem for me.

I used:

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

but INSIDE APPLICATION PARAMETERS.

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

Answer 4

I followed each of the suggestions here (I am using Angular 7), but nothing worked. My application refused to acknowledge that @ angular / material exists, so it showed an error in this line:

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

Although I used the --save to add Angular Material to my project:

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

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

I even tried to delete the package-lock.json , as some articles suggest that this is causing problems, but it had no effect.

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

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

I can’t say if this is a problem with using Angular 7, or has it been for many years ....

Answer 5

Please check out Angular Getting Started :)

1. Set corner material and corner CDK
2. Animations - if you need to
3. Import component modules

and enjoy {{Angular}}