angular - TypeError: _this.$instance.slick är inte en funktion

Jag använder ngx-slick-carousel i mitt Angular-projekt för en slider. Men det uppstår ett fel när jag navigerar till denna komponent där slidern finns, så min konsol visar detta fel

FEL TypeError: _this.$instance.slick är inte en funktion vid ngx-slick-carousel.js:121 vid ZoneDelegate../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391) vid Zone../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:150) vid NgZone.push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js:3779) vid SlickCarouselComponent.push../node_modules/ngx-slick-carousel/fesm5/ngx-slick-carousel.js.SlickCarouselComponent.initSlick (ngx-slick-carousel.js:114) vid SlickCarouselComponent.push../node_modules/ngx-slick-carousel/fesm5/ngx-slick-carousel.js.SlickCarouselComponent.ngAfterViewChecked (ngx-slick-carousel.js:70) vid callProviderLifecycles (core.js:9563) vid callElementProvidersLifecycles (core.js:9534) vid callLifecycleHooksChildrenFirst (core.js:9524) vid 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>

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

Svar #1

installera dessa paket:

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

uppdatera din angular.json-fil :

"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"
],

efter att du har gjort uppdateringen, se till att köra ng serve igen

Svar #2

Jag hoppas att du har installerat slick-biblioteket framgångsrikt med hjälp av dessa kommandon:

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

Inkludera jquery och slick js i "scripts" i din angular.json-fil :

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

och sedan kompilera om koden med ng serve. Jag hoppas att det skulle vara till hjälp för dig. Tack