0

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:

  1. Advice on solving the problem OR
  2. link to tutorial on creating a slide effect in order to try and implement the slide myself

Cheers.

3

2 Answers 2

0

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({ ...
0
0

You might want to try installing any @types related to slick-carousel, so that Angular could know and detect the types associated with the package.

1
  • changed my code to (<any>$('#' + elementId)).slick({... now it's not a compiler error but runtime - >query__WEBPACK_IMPORTED_MODULE_2__(...).slick is not a function any ideas? Aug 10, 2021 at 4:02

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.