Angular 2 material - md-ripple

app.component.html

<md-button>test</md-button>

app.component.ts

import { Component } from '@angular/core';
import { MD_BUTTON_DIRECTIVES } from '@angular2-material/button';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  directives: [MD_BUTTON_DIRECTIVES]
})
export class AppComponent {
  title = 'app works!';
}

package.json

{
  "name": "test-app",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-alpha.8",
    "es6-shim": "0.35.1",
    "reflect-metadata": "0.1.3",
    "rxjs": "5.0.0-beta.6",
    "systemjs": "0.19.26",
    "zone.js": "0.6.12",
    "@angular2-material/button": "^2.0.0-alpha.7",
    "@angular2-material/card": "^2.0.0-alpha.7",
    "@angular2-material/core": "^2.0.0-alpha.7",
    "@angular2-material/grid-list": "^2.0.0-alpha.7",
    "@angular2-material/icon": "^2.0.0-alpha.7",
    "@angular2-material/input": "^2.0.0-alpha.7",
    "@angular2-material/list": "^2.0.0-alpha.7",
    "@angular2-material/progress-bar": "^2.0.0-alpha.7",
    "@angular2-material/progress-circle": "^2.0.0-alpha.7",
    "@angular2-material/sidenav": "^2.0.0-alpha.7",
    "@angular2-material/tabs": "^2.0.0-alpha.7",
    "@angular2-material/toolbar": "^2.0.0-alpha.7"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.9",
    "codelyzer": "0.0.20",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "1.8.10",
    "typings": "0.8.1"
  }
}

whole project: https://1drv.ms/u/s!AogPpzHGNfuFifFvs_8qPyXO5Fooug

full stack trace:

"Error: Template parse errors:
Can't bind to 'md-ripple-trigger' since it isn't a known property of 'div'. ("*ngIf="isRippleEnabled()" class="md-button-ripple" [class.md-button-ripple-round]="isRoundButton()" [ERROR ->][md-ripple-trigger]="getHostElement()" [md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)"): MdButton@0:180
Can't bind to 'md-ripple-color' since it isn't a known property of 'div'. ("ton-ripple" [class.md-button-ripple-round]="isRoundButton()" [md-ripple-trigger]="getHostElement()" [ERROR ->][md-ripple-color]="isRoundButton() ? 'rgba(255, 255, 255, 0.2)' : ''" md-ripple-background-color="rgb"): MdButton@0:219
    at new BaseException (http://localhost:4200/vendor/@angular/compiler/src/facade/exceptions.js:27:23)
    at TemplateParser.parse (http://localhost:4200/vendor/@angular/compiler/src/template_parser/template_parser.js:98:19)
    at RuntimeCompiler._compileTemplate (http://localhost:4200/vendor/@angular/compiler/src/runtime_compiler.js:246:51)
    at eval (http://localhost:4200/vendor/@angular/compiler/src/runtime_compiler.js:174:83)
    at Set.forEach (native)
    at compile (http://localhost:4200/vendor/@angular/compiler/src/runtime_compiler.js:174:47)
    at ZoneDelegate.invoke (http://localhost:4200/vendor/zone.js/dist/zone.js:323:29)
    at Zone.run (http://localhost:4200/vendor/zone.js/dist/zone.js:216:44)
    at http://localhost:4200/vendor/zone.js/dist/zone.js:571:58
    at ZoneDelegate.invokeTask (http://localhost:4200/vendor/zone.js/dist/zone.js:356:38)"