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

我正在我的 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"
  }

我的代码有什么问题吗？

将@angular/材料回滚到版本 4：

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

版本 5 旨在与@angular5一起使用。

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

从更新日志：

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

无论如何，这里有一个关于如何升级到 Angular 5 的指南。

相关内容

最新更新

热门标签：