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 pile, I get the following error message:

ERROR in src/app/ponents/slider/sliderponent.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 pile:

ERROR in src/app/ponents/slider/sliderponent.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 sliderponent.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: './sliderponent.html',
  styleUrls: ['./sliderponent.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.

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 pile, I get the following error message:

ERROR in src/app/ponents/slider/slider.ponent.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 pile:

ERROR in src/app/ponents/slider/slider.ponent.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.ponent.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.ponent.html',
  styleUrls: ['./slider.ponent.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.

• javascript
• jquery
• angular
• slick.js

Share Improve this question Follow edited Sep 3, 2018 at 23:03 onTheInternet asked Sep 3, 2018 at 22:05 onTheInternetonTheInternet 7,2631313 gold badges4646 silver badges7878 bronze badges 7

• 1 Angular specifically states that it's not reended to import jquery. It defeats the purpose of what angular is for. With that being said, if you still require jquery (based on your other packages, jquery is a heavy dependency so you probably will), first make sure jquery is even being loaded up. To test this, try a console.log($) to see if it logs undefined or a function. If it logs a function, you're good to go. The only secondary step is that you need to declare jquery in your ponent since jquery is exeactly up to date with es6 imports: put this at the top declare const jQuery = $; – mwilson Commented Sep 3, 2018 at 22:19
• 1 If you put together a stackblitz of a simplified example, I can help troubleshoot further – mwilson Commented Sep 3, 2018 at 22:21
• Yeah, I know but it's pretty important to me to be able to use a few libraries to depend on jQuery. I was able to confirm jQuery works by using it's .text() method. I even had intellisense. I added a stack blitz. – onTheInternet Commented Sep 3, 2018 at 23:04
• if you are trying to use a library that depends on jQuery on an Angular project....don't use it. or check if they have a npm that doesn't need jquery – Patricio Vargas Commented Sep 3, 2018 at 23:50
• 1 adding declare const $: any; to the top of my ponent file worked for me at least. Compiled with no issues. – Craig Wayne Commented Feb 13, 2019 at 9:33

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 3

Import jQuery in this way:

declare var $: any;

Change the code to this:

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

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