Open bellsenawat opened 7 years ago
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';
not working
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);
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.
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
ERROR
app.js
webpack.config.js
Work around : Just replace this to header of index.html
But I dont' want to loading more files.
Please advise me