slickness.not is not a function webpack build about angular-slick-carousel HOT 7 OPEN

not working

from angular-slick-carousel.

Hi,

had the same problem, it's connected to angular.element() VS $(), as soon as i changed the line 143 of angular-slick.js, all worked fine.
The problem is at line 167, were "slickness.not()", this function on selected element does not exist angular.element().not().

here's what i changed to get it to work:
Line 140.
init = function () {
initOptions();

        var slickness = $(element); // VS var slickness = angular.element(element);

This is true for "angular": "^1.6.6", don't know if the ".not()" existed before or not, But on this jQueryLite version of this [email protected] it does not exist.

Don't know who or how this directive was tested, but this seems like an error everybody should have unless as i stated before, the ".not()" method existed before.

Cheers.

UPDATE

Forgot to mention, you also have to change this line (same concept)
Line 131.
destroy = function () {
var slickness = $(element); //angular.element(element);

from angular-slick-carousel.

I had the same problem.

Put this to my webpack config:

new webpack.ProvidePlugin({
'window.jQuery': 'jquery',
'windows.&': 'jquery'
});

And this as my first import before angular:

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;

from angular-slick-carousel.

That's because angular-slick-carousel depends on slick-carousel.

You need to install it first:
https://www.npmjs.com/package/slick-carousel

Then import it in your app:

import slickCarousel from 'slick-carousel';

from angular-slick-carousel.

none of this works. this is going on 2 days. help!.... the only solution I am not sure I tried is new webpack.ProvidePlugin({ because i dont know how it fits in webpack.config.js... Can someone explain to a beginner the how and whys of that solution? THank you!

from angular-slick-carousel.

as @pjsalsantos said, angular works with jqlite; Even with jquery loaded in the project, .not() used inside the directive will bring problems.
Just replace angular.element() with jquery's $(element).. or alternatively, refactor the code to avoid using the .not() property.
This will solve the issue.

from angular-slick-carousel.

To fix this issue in the mean time, load JQuery BEFORE Angular so angular uses the full JQuery library
ie if you are using a cdn method:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.10/angular.js"></script>
...
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-slick-carousel/3.1.7/angular-slick.js"></script>

This way Angular replaces the jquery-lite library inside angular.element() with the full jquery equivalent of $() as documented here:
https://docs.angularjs.org/api/ng/function/angular.element#overview

If you use a bundling system, check the documentation for ordering your scripts in a similar manner

from angular-slick-carousel.