Issue
I’m trying to integrate slick-carousel in my angular app (unfortunately the angular wrapper is very limited and cannot support our cards/slides design).
JQuery is supported in the app (i.e. writing $(#myId).text(‘text’) will change the corresponding DOM element) but cannot figure out why it doesn’t recognize slick.
These are the steps I’ve follwed after npm install slick-carousel
in angular.json added ‘scripts’
...
"projects": {
"my-app": {
...
"architect": {
"build": {
...
"options": {
...
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/slick-carousel/slick/slick.min.js"
]
},
...
}...
}...
}...
}...
and my component.ts
import * as $ from "jquery";
...
private initSlick(elementId) {
$('#' + elementId).slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
draggable: false
});
}
this result in error
Property ‘slick’ does not exist on type ‘JQuery’. Did you
mean ‘click’?
184 $('#' + elementId).slick({ node_modules/@types/jquery/JQuery.d.ts:1868:5 1868 click<TData>(eventData: TData, 1869 handler: JQuery.TypeEventHandler<TElement, TData, TElement, TElement, 'click'>): this; 'click' is declared here.
I’ve also tried:
-
hard coded id just to make sure
$('#myCarousel').slick({ -
entering in html
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/[email protected]/slick/slick.min.js"></script>
UPDATE
As suggested I’ve added <any> before the JQuery call now the project is compiling successfully but I get a runtime error
updated syntax
import * as $ from "jquery";
...
private initSlick(elementId) {
(<any>$('#' + elementId)).slick({
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
draggable: false
});
}
and the runtime error: query__WEBPACK_IMPORTED_MODULE_2__(...).slick is not a function
Please help with:
- Advice on solving the problem
OR - link to tutorial on creating a slide effect in order to try and implement the slide myself
Cheers.
Solution
Simpler approach:
Include jQuery script link in index.html. Something like below
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
In your .ts file, declare variable $ like below, outside of class definition. Can be below the last import statement
declare var $: any;
You can now use jquery selector in angular code without issues.
$('#myCarousel').slick({ ...
Answered By – Jp Vinjamoori
This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0