Angular2 - MaterializeCSS: Modal dialogs don't open

Question

I'm using Angular2 with materializecss. At the moment I'm trying to create modal dialogs which open on button click. There is also an example in the docs https://www.npmjs.com/package/angular2-materialize.

I also use a materilize-select which works perfectly fine, so I guess the installation, imports etc. are correct.

The problem is, when I click the modal-trigger the router resolves the new Route "localhost:4200/#modal1" and I'm redirected to my startpage.

I also tried to replace href with data-target="modal1" but that didn't work either.

Can I somehow disable the Hash-Links for the Router? My other routes are without hashes.

Heres the example from npm docs. I copied this part 1:1.

<!-- Modal Trigger -->
<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>
<!-- Modal Structure -->
<div id="modal1" class="modal">
  <div class="modal-content">
    <h4>Modal Header</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
  </div>
</div>

Any help/hints are appreciated!

Edit: I changed the anchor to call a function on click

<a materialize="leanModal" [materializeParams]="[{dismissible: false}]" class="waves-effect waves-light btn modal-trigger" (click)="openModal()>Modal</a>

which triggers

$('#modal1').openModal()

But now I get an error: j.velocity is not a function

Edit 2:

Got it to open the modals by using jQuery instead of $. I still get the error and the Application is stuck after opening the modal.

Answer 1

I found a solution. Was quite frustrating to get there but here it is:

I reinstalled everything that was related to materialize + angular-cli, being angular2-materialize, materialize-css, jquery and hammerjs (which does not need to be installed manually).

Then I followed the instruction from npmjs and removed the part which imports material-css in app.module.ts.

import "materialize-css";

And after that everything works just fine. No need to alter the webpack settings in angular2-materialize package or anything like that. My versions are:

• angular-cli 1.0.0-beta.16
• angular2-materialize 5.2.1
• materialize-css 0.97.7
• jquery 2.2.4

I hope that I can save other people some frustrating hours I had with that.