slickness.not is not a function webpack build

[bellsenawat]

ERROR

---

TypeError: slickness.not is not a function
    at angular-slick.js:167
    at angular.js:20178
    at completeOutstandingRequest (angular.js:6274)
    at angular.js:6554

---

app.js

---

window.jQuery = require('jquery');
var bootstrap = require('bootstrap/dist/js/bootstrap');
var slick = require('slick-carousel');

import angular from 'angular';
import slickCarousel from 'angular-slick-carousel';

---

webpack.config.js

---

 entry: {
    app: ['babel-polyfill', path.join(__dirname, 'src', 'app/root.module.js') ],  
  },
new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
  }),
 new HtmlWebpackPlugin({
      template: 'src/public/index.ejs',
      inject: 'body',
      hash: true,
      chunks: ['app']
   }),

Work around :
Just replace this to header of index.html

<script src="/lib/jquery-2.2.4.min.js"></script>    
<script src="/lib/slick.min.js"></script>

But I dont' want to loading more files.

Please advise me

[svindler]

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;

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';

[heshamelmasry77]

not working

[ohabash]

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!

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 angular@1.6.6 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);

[peterfiorito]

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.

[EvanLomas]

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