angular2-materialize: TypeError: e.velocity is not a function

I’m trying to use angular2-materialize with angular-cli@webpack.

I’ve managed to load the stub app without errors, but if I try to include a sideNav in the application, when I click on the menu button I get this exception:

EXCEPTION: TypeError: e.velocity is not a function

TypeError: e.velocity is not a function
    at HTMLAnchorElement.<anonymous> (materialize.js:3)
    at HTMLAnchorElement.dispatch (jquery.js:4737)
    at HTMLAnchorElement.elemData.handle (jquery.js:4549)
    at ZoneDelegate.invokeTask (zone.js:356)
    at Object.onInvokeTask (ng_zone_impl.js:44)
    at ZoneDelegate.invokeTask (zone.js:355)
    at Zone.runTask (zone.js:256)
    at HTMLAnchorElement.ZoneTask.invoke (zone.js:423)

Is there a way to fix this?

---

My main.ts file is:

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';


// import angular2-materialize: once per project
import 'jquery';
import "materialize"
import "materialize-css"
import "angular2-materialize";

import { AppComponent, environment } from './app/';

if (environment.production) {
  enableProdMode();
}

bootstrap(AppComponent);

app.component.ts file:

import { Component } from '@angular/core';
import { MaterializeDirective } from 'angular2-materialize';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
  directives: [ MaterializeDirective ]
})
export class AppComponent {

}

and app.component.html file

<div class="container">
  <ul id="slide-out" class="side-nav">
    <li>
      <div class="userView">

      </div>
    </li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
  </ul>
  <a materialize="sideNav" href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
</div>