Property 'slick' does not exist on type 'JQuery<HTMLElement>'

user_2070478 0
Viewed 7678

I have an Angular 6 project that I want to use Slick Slider with. First I installed jQuery

npm i jquery

and then slick carousel

npm i slick-carousel

I then made the necessary edits to my angular.json file

"styles": [
 "node_modules/bootstrap/dist/css/bootstrap.min.css",
 "node_modules/font-awesome/css/font-awesome.css",
 "node_modules/slick-carousel/slick/slick.css"

],
 "scripts": [
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/slick-carousel/slick/slick.min.js"
]

Then I create a simple slider layout

<div class="mySlider">
  <div><h3>1</h3></div>
  <div><h3>2</h3></div>
  <div><h3>3</h3></div>
  <div><h3>4</h3></div>
  <div><h3>5</h3></div>
  <div><h3>6</h3></div>
</div>

In my typescript, first I import * from jquery. 

import * as $ from 'jquery';

And finally, I call the slick method in the ngOnInit

  ngOnInit() {
    $(document).ready(function() {
      $('.mySlider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
    });
  }

When I try to compile, I get the following error message:

ERROR in src/app/components/slider/slider.component.ts(20,22): error TS2551: Property 'slick' does not exist on type 'JQuery'. Did you mean 'click'?

So I tried to declare slick as a variable at the top of the file. 

declare var slick: any;

But this didn't help. So I tried to create an import like I do with jQuery. 

import * as slick from 'slick-carousel';

but that only gives me the following error message when trying to compile:

ERROR in src/app/components/slider/slider.component.ts(3,24): error TS2306: File 'D:/developement/DDI World Front End/DDIWorld_frontEnd/node_modules/@types/slick-carousel/index.d.ts' is not a module.

I'm not sure what else to try or what I am doing wrong. Thanks for any help.

Here is my full slider.component.ts

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
// import * as slick from 'slick-carousel';
// declare var slick: any;



@Component({
  selector: 'app-slider',
  templateUrl: './slider.component.html',
  styleUrls: ['./slider.component.css']
})
export class SliderComponent implements OnInit {



  constructor() { }

  ngOnInit() {
    $(document).ready(function() {
      $('.mySlider').slick({
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
    });
  }

}

Edit

Here is a StackBlitz but I'm getting a different error there.

slick.js angular jquery javascript
2 Answers

Import jQuery in this way:

declare var $: any;

Change the code to this:

(<any>$('.mySlider')).slick({
    infinite: true,
    slidesToShow: 3,
    slidesToScroll: 3
});
user_122297790

Yes, @jesser is right.

Used something like this:

import * as $ from 'jquery';
import * as slick from 'slick-carousel';

..

  // then in function:
  require('../../../node_modules/slick-carousel/slick/slick.js');

  (<any>$('.slider-wrap')).slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 1000
});

p.s: install slick carousel and jQuery before:

npm install jquery@>=1.8.0 --save-dev 
npm i slick-carousel
user_3487360
Related