材料模塊打破角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的穩定支持，以避免麻煩。