Question

我已经在Angular 2 Quickstart应用程序中安装了Material Design模块，但是当我在app.module.ts中导入模块时，应用程序似乎破了。

这是app.module.ts中的设置

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MaterialModule } from '@angular/material';

import { MessagesComponent} from './messages-component';
import { AppComponent }  from './app.component';

@NgModule({
  imports:      [ BrowserModule, MaterialModule ],
  declarations: [ AppComponent, MessagesComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

我收到以下错误：

node_modules/@angular/material/typings/button/button.d.ts(40,22): error TS2420: Class 'MdButton' incorrectly implements interface 'CanDisabl
e'.

  Property 'disabled' is missing in type 'MdButton'.

node_modules/@angular/material/typings/button/button.d.ts(40,39): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdButton
Base' is not a constructor function type.

node_modules/@angular/material/typings/checkbox/checkbox.d.ts(43,22): error TS2420: Class 'MdCheckbox' incorrectly implements interface 'Can
Disable'.

  Property 'disabled' is missing in type 'MdCheckbox'.

node_modules/@angular/material/typings/checkbox/checkbox.d.ts(43,41): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdCh
eckboxBase' is not a constructor function type.

node_modules/@angular/material/typings/dialog/dialog-container.d.ts(2,32): error TS2307: Cannot find module '@angular/animations'.

node_modules/@angular/material/typings/menu/menu-animations.d.ts(1,42): error TS2307: Cannot find module '@angular/animations'.

node_modules/@angular/material/typings/radio/radio.d.ts(24,22): error TS2420: Class 'MdRadioGroup' incorrectly implements interface 'CanDisa
ble'.

  Property 'disabled' is missing in type 'MdRadioGroup'.

node_modules/@angular/material/typings/radio/radio.d.ts(24,43): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdRadioGro
upBase' is not a constructor function type.

node_modules/@angular/material/typings/select/select-animations.d.ts(1,42): error TS2307: Cannot find module '@angular/animations'.

node_modules/@angular/material/typings/slide-toggle/slide-toggle.d.ts(14,22): error TS2420: Class 'MdSlideToggle' incorrectly implements int
erface 'CanDisable'.

  Property 'disabled' is missing in type 'MdSlideToggle'.

node_modules/@angular/material/typings/slide-toggle/slide-toggle.d.ts(14,44): error TS2507: Type '(new (...args: any[]) => CanDisable) & typ
eof MdSlideToggleBase' is not a constructor function type.

node_modules/@angular/material/typings/slider/slider.d.ts(26,22): error TS2420: Class 'MdSlider' incorrectly implements interface 'CanDisabl
e'.
  Property 'disabled' is missing in type 'MdSlider'.

node_modules/@angular/material/typings/slider/slider.d.ts(26,39): error TS2507: Type '(new (...args: any[]) => CanDisable) & typeof MdSlider
Base' is not a constructor function type.

node_modules/@angular/material/typings/snack-bar/snack-bar-container.d.ts(2,32): error TS2307: Cannot find module '@angular/animations'.

node_modules/@angular/material/typings/tabs/tab-body.d.ts(2,32): error TS2307: Cannot find module '@angular/animations'.

node_modules/@angular/material/typings/tooltip/tooltip.d.ts(2,32): error TS2307: Cannot find module '@angular/animations'.

之前有没有人遇到过这个问题？

Answer 1

Angular Material团队实际上希望将用户从仅将MaterialModule导入到他们的应用程序中，而不仅仅是用于所需组件的模块。（这与捆绑树摇动保持您不使用的组件时的问题有关）并且您可以在getting started guide here中看到。

请注意，这有点令人讨厌，所以我通常会自己导入整个模块。无论如何，我发现您缺少的是包含第2步中提到的BrowserAnimationsModule。

尝试将模块修改为此...

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from '@angular/material';

import { MessagesComponent} from './messages-component';
import { AppComponent } from './app.component';

@NgModule({
   imports: [ 
      BrowserModule,
      BrowserAnimationsModule,
      MaterialModule
   ],
   declarations: [
      AppComponent,
      MessagesComponent
   ],
   bootstrap:[ AppComponent ]
})
export class AppModule { }

Answer 2

很难找到最新版本的正确设置。在最新的角度材料版本中，不需要导入MaterialModule 您可以从angular-quickstart下载或分叉here样板该项目拥有角度材料2.0.0-beta.6和角度4.0.0的最新稳定支持，以免您遇到麻烦。

材料模块打破Angular 2快速入门

2 个答案: