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