2

I'm using ngx-slick-carousel in my angular project for slider. But there is a error when I route this component where is slider so my console shows me this error

ERROR TypeError: _this.$instance.slick is not a function at ngx-slick-carousel.js:121 at ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) at Zone../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150) at NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3779) at SlickCarouselComponent.push../node_modules/ngx-slick-carousel/fesm5/ngx-slick-carousel.js.SlickCarouselComponent.initSlick (ngx-slick-carousel.js:114) at SlickCarouselComponent.push../node_modules/ngx-slick-carousel/fesm5/ngx-slick-carousel.js.SlickCarouselComponent.ngAfterViewChecked (ngx-slick-carousel.js:70) at callProviderLifecycles (core.js:9563) at callElementProvidersLifecycles (core.js:9534) at callLifecycleHooksChildrenFirst (core.js:9524) at checkAndUpdateView (core.js:10460)

HTML

<ngx-slick-carousel class="carousel" #slickModal="slick-carousel" [config]="slideConfig2">
        <div ngxSlickItem *ngFor="let legislation of objLegislationList" class="slide">
          <div class="descBox row-2">
            <img
              src="http://1.bp.blogspot.com/-Qy1y_Ur-_mE/TtxVJ86z2EI/AAAAAAAAAss/meLIad_uSfk/s1600/law-background-1-767326.jpg" />
            <h3 onMouseOver="this.style.cursor='pointer'">{{legislation.Title}}</h3>
            <p style="margin-bottom: 0;">Date : {{legislation.Date}}</p>
            <p>Category {{legislation.CatName}}</p>
          </div>
        </div>
      </ngx-slick-carousel>

component.ts

ngAfterViewInit() {
    this.iniSlickJs();
  }
private iniSlickJs() {
    const htmlScriptElement = document.createElement('script');
    htmlScriptElement.src = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js';
    this.elementRef.nativeElement.appendChild(htmlScriptElement);
  }
ZaIn KhAn
  • 722
  • 9
  • 24

1 Answers1

0

I wish you have successfully installed the slick library by using these commands:

$ npm install jquery --save
$ npm install slick-carousel --save
$ npm install ngx-slick-carousel --save

Include jquery and slick js in "scripts" at your angular.json file :

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

and then Recompile the code using ng serve. I hope it would helpful to you. Thanks

Inzamam Idrees
  • 1,581
  • 11
  • 21