我正在使用 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"
}
}
原文由 Anil Jagtap 发布,翻译遵循 CC BY-SA 4.0 许可协议
按照以下步骤开始使用 Angular 材质。
第 1 步:安装 Angular 材质
第 2 步:动画
一些 Material 组件依赖于 Angular 动画模块,以便能够进行更高级的转换。如果您希望这些动画在您的应用程序中工作,您必须安装
@angular/animations
模块并在您的应用程序中包含 BrowserAnimationsModule。然后
第三步:导入组件模块
为您要使用的每个组件导入 NgModule:
确保在 Angular 的 BrowserModule 之后导入 Angular Material 模块,因为导入顺序对 NgModules 很重要
第 4 步:包含主题
需要包含一个主题才能将所有核心和主题样式应用于您的应用程序。
要开始使用预构建的主题,请在应用的 index.html 中包含以下内容: