TypeError: _this.$instance.slick is not a function

Question

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);
  }

Answer 1

install this packages:

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

update your angular.json file :

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

after you made the update make sure you run ng serve again