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

Question

我已经在我的Angular 2快速启动应用程序中安装了材质设计模块，但是当我在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中看到该问题。

请注意，这有点麻烦，所以我通常自己导入整个模块。不管一两件事，我看到你缺少的是BrowserAnimationsModule的步骤中提到的包括2

尝试修改你的模块来此...

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的稳定支持，以避免麻烦。