Error on project setup

[ananda121]

Hi,
I have created a new project using Angular2-mdl with gulp.

I got the following error while adding

import { MDL_DIRECTIVES } from 'angular2-mdl'; @Component{ directives: [ MDL_DIRECTIVES ] }

zone.js:461 Unhandled Promise rejection: Template parse errors: Can't bind to 'mdl-ripple' since it isn't a known native property (" (click)="mdlLayout.tabSelected(tab)" class="mdl-layout__tab" [ERROR ->][mdl-ripple]="isRipple" [ngClass]="{'is-active': tab.isActive}">{{tab.title}}</a> "): MdlLayoutHeaderComponent@7:16 ; Zone: angular ; Task: Promise.then ; Value: BaseException$1consoleError @ zone.js:461

If I didn't add this then only text is visible in demo app.

Please help me on this.

It will be great if you create a seed project using angular2-mdl

Thanks,
Ananda

[misty000]

I've got the same problem too.
http://git.oschina.net/ellipse/angular2-seed/tree/mdl/

[mseemann]

@ananda121 Thx for filing this bug! I'm using inheritance for class decorators. It seems the problem lays in here: angular/angular#5415. The system.js seeds are using relflect-meta, your build tools are using core-js in it's seed projects. For a workaround you may include reflect-meta.
@misty000 in your example this would be:
npm install reflect-metadata --save
and in polyfills.browser.ts you have to add
import 'reflect-metadata';

version 1.1.5 will fix this with a solution without reflect-meta.

[mseemann]

npm version 1.1.5 with this fix is released.

[misty000]

@mseemann Thx. I found it