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

Question

我已经在我的 Angular 2 快速入门应用程序中安装了 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。
您可以从 here 下载或 fork angular-quickstart 样板文件 本项目最新稳定支持 angular material 2.0.0-beta.6 和 angular 4.0.0 为您免去烦恼。