Material Module Breaks Angular 2 Quickstart

Question

I have installed the Material Design Module in my Angular 2 Quickstart Application, but when I import the module in app.module.ts the application seems to break.

This is the set up in 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 { }

I get the following errors:

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'.

Has anyone experienced this issue before?

How did you install it and which version of angular you using — Mike Tung
– Mike Tung, Commented Jun 15, 2017 at 1:34
MdModule has been deprecated in beta.3. Any version afterwards need to be setup using following steps, material.angular.io/guide/getting-started — Nehal
– Nehal, Commented Jun 15, 2017 at 1:53
Mike, I cloned the Angular quickstart project on Github github.com/angular/quickstart so whatever version of Angular is in that. As for the Material Design version, I installed using npm install --save @angular/material. I did not specify any specific version. Thank you for the formatting link. cartant — Joe LoPresti
– Joe LoPresti, Commented Jun 15, 2017 at 2:22

MichaelSolati · Accepted Answer · 2017-06-15 01:48:54Z

The Angular Material team actually wants to shift users off of just importing the MaterialModule into their application to instead just modules for the components that you need. (This has to do with an issue when bundling that tree shaking keeps the components you don't use) And you can see that in the getting started guide here.

Mind you, that's a bit of a nuisance so I usually import the entire module myself. Regardless one thing I see that you're missing is the inclusion of the BrowserAnimationsModule mentioned in step 2.

Try modifying your module to this...

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 { }

Rajan Chauhan · Accepted Answer · 2017-06-15 02:10:52Z

0

It was pretty difficult to find the correct settings for latest versions. In the latest angular material version importing MaterialModule is not required.
You can download or fork angular-quickstart boilerplate from here This project have the latest stable support of angular material 2.0.0-beta.6 and angular 4.0.0 to save you from trouble.

answered Jun 15, 2017 at 2:10

Rajan Chauhan

1,3831 gold badge15 silver badges33 bronze badges

1 Comment

Joe LoPresti Over a year ago

Thanks Rajan! I went ahead and cloned your version of the angular-quickstart, but now i can't seem to get the application to run at all. I'll keep working on it and let you know if I can figure out what the issue is. I'm having a rather difficult job debugging angular at this point.

Collectives™ on Stack Overflow

Material Module Breaks Angular 2 Quickstart

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related