cannot get it to work with angular2 webpack starter about angular2-materialize HOT 7 CLOSED

I'm also experimenting with Angular 2 Materialize in Angular 2 Webpack Starter, and got the $overlay.velocity is not a function error when trying to open a modal.

I got rid of the error by modifying the ProvidePlugin block:

    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "root.jQuery": "jquery",
      Hammer: "hammerjs/hammer"
    })

The two lines before Hammer: "hammerjs/hammer" did the trick.

from angular2-materialize.

@vesteraas you rock!! This solved the problem in my tests.
I found that "root.jQuery" is not needed, so I'll just add the "window.jQuery" to the documentation.

@MurhafSousli please let us know if that solves it for you as well so we can close this issue.

from angular2-materialize.

Seems like it couldn't fine the angular2-materialize module in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
Can you share the code (on Github or attach a zip of our C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular) so I can take a look at?

from angular2-materialize.

@MurhafSousli I noticed that the distribution package had the "ts" files in it and with the webpack-starter it was loading them instead of the js files. I've released a new version without them and confirmed that it works with the angular2-webpack-starter project. Try to reinstall that one and see if that works for you.

If it still doesn't work for you, take a look at the https://github.com/InfomediaLtd/angular2-webpack-starter fork that is exactly like the regular angular2-webpack-starter with the addition of angular2-materialize,
Here's the relevant commit, adding angular2-materialize to the starter project: InfomediaLtd/angular2-webpack-starter@af82ae0

from angular2-materialize.

Thank you, now I have the same wepback.config.js and the module worked, I tried

1. modal example gave Uncaught TypeError: $overlay.velocity is not a function
2. hover example gave Uncaught TypeError: newTooltip.velocity is not a function

here is the full code https://github.com/MurhafSousli/ng2-wordpress-theme

from angular2-materialize.

@MurhafSousli thanks for testing it and providing feedback.

I've updated the documentation on webpack configuration with missing provided libraries for MaterializeCSS:

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Hammer: "hammerjs/hammer"
        })

But, it's still complaining about the missing velocity function. Looking at the MaterializeCSS code I see that it's got a polyfill for velocity, but I can't understand why it works for JSPM and not for webpack.
When running the following in the browser console it works for JSPM , but not for webpack:

$().velocity

It means that the MaterializeCSS JS code that creates the velocity method on jQuery didn't work. It's the next 3 minified lines: https://github.com/Dogfalo/materialize/blob/master/dist/js/materialize.js#L232
When running it with webpack, the jQuery object doesn't have the Velocity method after running these three lines. Not sure why...

I've added a webpack configuration to the library so it's easy to run it internally and see the problem: https://github.com/InfomediaLtd/angular2-materialize

Maybe @Dogfalo can assist us here?

from angular2-materialize.

Thank you @rubyboy, you can close the issue

from angular2-materialize.