找不到模塊「@ angular/material」

Question

我正在使用Angular 2.當我試圖導入「@ angular/material」時，出現此錯誤。我導入包，比如：

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

我tsconfig.json文件，如：

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

我的package.json代碼：

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

更改爲，

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

DEMO

Answer 2

按照下列步驟來開始使用角材料

步驟1：安裝角材料

NPM安裝--save @角/材料

第2步：動畫

某些材質組件依賴於Angular動畫模塊，以便能夠進行更高級的轉換。如果您希望這些動畫在您的應用中運行，您必須安裝@angular/animations模塊並將BrowserAnimationsModule包含在您的應用中。

NPM安裝--save @角/動畫

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

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

步驟3：導入部件模塊

導入NgModule爲要使用的每個組分：

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

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

務必在Angular的BrowserModule之後導入Angular Material模塊，因爲導入順序對於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 { } 

第4步：包括主題

包括要求所有的核心和主題樣式應用到您的應用程序的一個主題。

要開始使用預構建的主題，包括在您的應用程序的index.html中的以下情況：

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

Answer 3

這就是解決了這個問題對我來說。

我用：

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

但裏面的應用程序文件夾。

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