Question

我已经安装了命令：

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

我添加到 app.module.ts

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

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

的package.json

"dependencies": {
    "@angular/animations": "^5.2.10",
    "@angular/cdk": "^6.0.1",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/material": "^6.0.1",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },

我尝试在 test.component.html 中测试

<button mat-button>Click me!</button>

我在控制台中收到错误，如下所示：

bidi.es5.js:86 Uncaught TypeError: Object(...) is not a function
    at eval (bidi.es5.js:86)
    at eval (bidi.es5.js:88)
    at Object../node_modules/@angular/cdk/esm5/bidi.es5.js (vendor.bundle.js:39)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (core.es5.js:60)
    at Object../node_modules/@angular/material/esm5/core.es5.js (vendor.bundle.js:255)
    at __webpack_require__ (inline.bundle.js:55)
    at eval (autocomplete.es5.js:17)
    at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (vendor.bundle.js:191)
    at __webpack_require__ (inline.bundle.js:55)

ng -v 给了我这个：

Your global Angular CLI version (6.0.0) is greater than your local
version (1.7.4). The local Angular CLI version is used.
Angular CLI: 1.7.4
Node: 8.11.1
OS: win32 x64
Angular: 5.2.10

Answer 1

您是否在测试组件中导入了模块？您需要导入

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

       imports: [BrowserAnimationsModule]

每个组件内部。

我认为它在文档中的某处提到过，你不应该将它导入app.module或为它创建一个全局模块。

Answer 2

你必须使用与Angular Material v6使用的相同的Angular版本：Angular v6

有关如何更新依赖关系的信息，请参阅https://update.angular.io。

或者，考虑安装Angular Material的5.x.x。

无法获得角度/材料以开始工作

2 个答案: