Error: The slick function is not recognized by _this.$instance

I have implemented the ngx-slick-carousel in my Angular project for creating a slider. However, I encountered an error when I navigate to the component containing the slider, resulting in the following error displayed in the console:

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

Answer №1

To start using this feature, first, you need to install the following packages:

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

Next, you will need to update your angular.json file with the following changes:

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

Don't forget to run ng serve again after making these updates.

Answer №2

I hope you have successfully completed the installation of the amazing slick library with these simple commands:

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

Don't forget to add jquery and slick js to the "scripts" section in your angular.json file :

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

After that, make sure to Recompile the code using ng serve. I believe this will be beneficial for you. Thank you

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to format dates when exporting Excel from Kendo Grid in Angular 2

When attempting to export data from the Kendo UI Grid for Angular, there seems to be an issue with formatting the date column. The actual date value is not being displayed correctly in the exported file. Below is a snippet of the code: <kendo-excelexpo ...

excelangulargridexportkendo-ui-angular2

Angular Obsidian Theme

Hey there! I've successfully implemented a toggle button that switches my Ionic 3 app to dark mode. However, I'm unsure about where exactly I should define the global class [class.dark-theme]="dark". It's essential for this class to be in th ...

angulartypescriptionic-framework

Retrieve an object containing properties specified in the function's parameter list

I am currently working on developing a function that can dynamically create and return an object with properties based on an array of strings provided as parameters. type Foods = 'apple' | 'banana' | 'pear'; function foodObje ...

typescript

What is the reason a type is able to cast to an indexed collection when it is inferred, while an explicit type that seems identical is

I am puzzled by why my inferred types are considered as instances of my more general collection type while my explicit types are not. My goal was to: Have a specific part of my application work with tightly defined collections (e.g., IParents vs IBoss ...

typescript

Utilizing Typescript to ensure property keys within a class are valid

Looking for advice to make a method more generic. Trying to pass Child class property keys as arguments to the Super.method and have Child[key] be of a Sub class. class Parent { method<T extends keyof this>(keys: T[]){ } } class Child extends P ...

typescriptgenerics

"Upon the initial page load, the persistence of values in local storage using Next.js, React, and Recoil

Check out this code I have, const Layout: React.FC<LayoutProps> = ({ children }) => { const darkMode = useRecoilValue(darkModeAtom) console.log('darkMode: ', darkMode) return ( <div className={`max-w-6xl mx-au ...

reactjstypescriptnext.jsstring-interpolationrecoiljs

How can I integrate React-Router Link as a component within Material-UI using Typescript?

Hey everyone, I've encountered an issue while trying to utilize Material UI's component prop to replace the base HTML element of a component. Error: The error message reads: Type 'Props' is not generic. This problem arises from the fo ...

reactjstypescriptreact-routermaterial-uistyled-components

TypeScript - Minimize redundancy when defining types for a class and its constructor arguments

Here is a class structure I am currently using: class Person { id?: string = uuid(); name: string; constructor(data: Person) { _.merge(this, data); } } The 'uuid' function generates an id and '_' refers to loda ...

typescript

Tips for creating spacing between an image and a button when utilizing the routerLink feature in CSS

To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...

cssangular

Personalized context hook TypeScript

I have been experimenting with a custom hook and the context API, based on an interesting approach that I found in this repository. However, I encountered an error when trying to use it with a simple state for a number. Even though I wanted to create a mo ...

reactjstypescriptreact-context

Ways to display a popup when hovering over a marker in ngx-mapbox-gl

I have a current implementation that displays markers and popups on click of markers. We now need to update it to show popups on hover instead. Here is the structure of my template: <mgl-map #map1 [style]="'mapbox://styles/mapbox/streets ...

angularmapboxmapbox-gl-jsmapbox-marker

In Vue 3, the v-model feature is utilized as parameter passing instead of using :prop and @emit

I've been trying to implement two-way binding using v-model in Vue.js based on this article. The idea is to pass values from a parent component to a child component with automatic event emission when the value changes in the child component. However, ...

typescriptvuejs3vue-class-components

Using Next.js and TypeScript to Send Props to Dynamically Typed Objects

I am in the process of developing an application using Next.js with TypeScript. I have encountered an error message stating Type 'VoidFunctionComponent<ShirtDetailProps>' is missing the following properties when passing props to a component ...

typescriptnext.js

What is the best way to modify the class of specific items within an ngFor loop in

I apologize if this question has already been addressed, but I couldn't find a suitable solution. My goal is to develop a basic chat application where messages sent by the current user are displayed on the right side of the screen, while messages from ...

angularionic2

Refresh the page when scss file is saved

Exploring Angular 2 with the official Quick start guide has been a fun learning experience. The development dependencies specified in the package.json file enable live reload function by saving html files. In addition to utilizing Gulp and live reloading ...

angulargulpgulp-livereload

"TypeScript function returning a boolean value upon completion of a resolved promise

When working on a promise that returns a boolean in TypeScript, I encountered an error message that says: A 'get' accessor must return a value. The code snippet causing the issue is as follows: get tokenValid(): boolean { // Check if curre ...

javascripttypescriptes6-promiseionic3ionic-storage

Problem with rendering accordion list in Ionic 2

I am integrating an accordion feature into my Ionic2 application. Here is the code snippet from my component: export class ContactPage { public days : any[]; public shownGroup; constructor(public navCtrl: NavController) { this.days= ...

angularionic2

Angular login issue: Error message - Correlation failed. Location not recognized

My application consists of two main elements: An IdentityServer4 host (Asp.NET Core 2.2 application with Asp.NET identity) running on http://localhost:5000 An Angular client app (Angular v7.2.12) operating on http://localhost:5002 The goal is to have the ...

c#angularidentityserver4openid-connect

Is it possible to derive a TypeScript interface from a Mongoose schema without including the 'Document' type?

Using ts-mongoose allows me to define interfaces and schemas for my data in one place. I then export them as a mongoose schema along with the actual interface. The challenge I'm facing is finding a simple way to extract that interface without includi ...

typescriptmongoosetypescript-typings

Custom JavaScript files are not recognized by Angular 4 pages unless the page is manually refreshed

I am facing an issue with my custom JavaScript files in Angular. I have imported them all in the angular-cli.json file but the pages do not recognize them unless I refresh the page after navigating from one page to another. Here is a snippet of my angular ...

javascriptangularroutesangular-cli