Question

我正在使用angular4项目中的材质组件。但是我无法使其工作并在yarn start上出现此错误：

chunk {inline} inline.bundle.js, inline.bundle.js.map (inline) 5.83 kB [entry] [rendered]
chunk {main} main.bundle.js, main.bundle.js.map (main) 235 kB {vendor} [initial] [rendered]
chunk {polyfills} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 326 kB {inline} [initial] [rendered]
chunk {styles} styles.bundle.js, styles.bundle.js.map (styles) 161 kB {inline} [initial] [rendered]
chunk {vendor} vendor.bundle.js, vendor.bundle.js.map (vendor) 3.99 MB [initial] [rendered]

ERROR in /Users/joey/dev/jump/front-end/node_modules/@angular/material/core/typings/option/optgroup.d.ts (9,22): Class 'MatOptgroup' incorrectly implements interface 'CanDisable'.
  Property 'disabled' is missing in type 'MatOptgroup'.
ERROR in /Users/joey/dev/jump/front-end/node_modules/@angular/material/core/typings/option/optgroup.d.ts (9,42): Type '(new (...args: any[]) => CanDisable) & typeof MatOptgroupBase' is not a constructor function type.
ERROR in /Users/joey/dev/jump/front-end/node_modules/@angular/material/progress-spinner/typings/progress-spinner.d.ts (22,22): Class 'MatProgressSpinner' incorrectly implements interface 'CanColor'.
  Property 'color' is missing in type 'MatProgressSpinner'.
ERROR in /Users/joey/dev/jump/front-end/node_modules/@angular/material/progress-spinner/typings/progress-spinner.d.ts (22,49): Type '(new (...args: any[]) => CanColor) & typeof MatProgressSpinnerBase' is not a constructor function type.
ERROR in AppModule is not an NgModule

在我导入的app.module.ts中：

import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";

@NgModule({
    bootstrap: [ AppComponent ],
    imports: [ MatProgressSpinnerModule ],
})

我搜索过，有人建议使用typescript 2.2。以下是我的project.json依赖项：

"dependencies": {
    "@angular/animations": "4.3.6",
    "@angular/cdk": "^5.0.4",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/material": "^5.0.4",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "codelyzer": "^3.1.2",
    "core-js": "^2.4.1",
    "ngx-mydatepicker": "^2.0.5",
    "rxjs": "^5.1.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "^1.0.0",
    "@angular/compiler-cli": "^4.0.0",
    "@types/fb": "0.0.22",
    "@types/node": "~6.0.60",
    "bulma": "^0.3.1",
    "ts-node": "~2.0.0",
    "tslint": "^5.6.0",
    "typescript": "^2.2.0"
  }

我的代码有什么问题吗？

Answer 1

将@ angular / material回滚到版本4：

"@angular/material": "^4.0.0",

版本5适用于@ angular5。

Answer 2

从版本5.0.0-rc0开始，Angular Material 需要Angular 5 ：

来自changelog：

Angular Material现在需要Angular 5，它本身需要TypeScript 2.4+和RxJS 5.5.2 +

无论如何，这里有关于如何升级到Angular 5的guide。

如何在angular4项目中使用材料模块

2 个答案: