snackbar not displayed anymore with angular version 4.0.0-rc1

[marius-oprea]

Bug, feature request, or proposal:

BUG

What is the expected behavior?

to display a snackbar at the bottom of the browser

What is the current behavior?

it display a transparent div container with a slim shadow without displaying the snackbar

What are the steps to reproduce?

Add this code in your component created with Angular version 4.0.0-rc1 and @angular/cli version 1.0.0-rc.0 and @angular/material version 2.0.0-beta.2 :

import {MdSnackBar} from '@angular/material';
....
constructor(...public snackBar: MdSnackBar) {}
....
this.snackBar.open('Test','Ok', {duration:3000});

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, browsers are affected?

Angular version 4.0.0-rc1 and @angular/cli version 1.0.0-rc.0 and @angular/material version 2.0.0-beta.2 . Tested on Chrome and Firefox and Edge latest versions.

Is there anything else we should know?

[willshowell]

Here is a plunk showing the issue

http://plnkr.co/edit/ZJxPOjKC6Lr6RnYQBgTy?p=preview

Switch between angular@4.0.0-rc.1 and angular@latest (2.4.8 atm) by swapping the commented out import in systemjs.config.ts

[DenisLaboureyras]

Animations in angular 4.0 are in a separate module, you should import it. If not, the snackbar stays invisible.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

The side effect in my case is that I can't use anymore aot and uglification with webpack, see issue:
angular/angular#14737

[crisbeto]

That makes sense @DenisLaboureyras, although we should probably handle the lack of animations a little better.

[marcorinck]

Shouldn't the component just display itself without animations then? There are usecases where I deliberately disable animations and to not be able to use certain components would be quite a surprise.