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

[petinho]

Hi. I've included the library with the same steps as in the example, but I'm receiving the error on the title. It seems to be, that the function is not found. Imports are done correctly, and the order should also be ok.

Do you have an idea of what could be wrong?

$instance is not undefined, but has no slick function.

Thanks in advance

[leo6104]

@petinho It is not ngx-slick-carousel problem. Did you add slick library in angular.json?

Include slick css in "styles" at your angular.json file :

  "styles": [
    ...
    "node_modules/slick-carousel/slick/slick.scss",
    "node_modules/slick-carousel/slick/slick-theme.scss",
    ...
  ]

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

[dianaVidalC]

I get the same error, some solution?

[leo6104]

@petinho @dianaVidalC It is common bug when trying to use jQuery library in Angular. There is lots of causes make it happened. Please give more information about your project.

1. What is your angular version? Please comment your ng version command result
2. Can you share your angular.json "scripts" part?
3. Is there any other jQuery library you use ?

[dianaVidalC]

@petinho I use boostrap too, I hope you can help me

angular version:

Angular CLI: 6.1.5
Node: 8.11.4
OS: win32 x64
Angular: 6.1.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cli                      6.1.5
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.2
typescript                        2.7.2
webpack                           4.9.2

"scripts" part in angular.json

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

[petinho]

@leo6104 The library and all needed scripts/styles were added.

Here is my Angular version:

` Angular CLI: 6.1.5 Node: 8.11.4 OS: win32 x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-browser ... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.7.5 @angular-devkit/build-angular 0.7.5 @angular-devkit/build-optimizer 0.7.5 @angular-devkit/build-webpack 0.7.5 @angular-devkit/core 0.7.5 @angular-devkit/schematics 0.7.5 @angular/cli 6.1.5 @ngtools/webpack 6.1.5 @schematics/angular 0.7.5 @schematics/update 0.7.5 rxjs 6.2.2 typescript 2.9.2 webpack 4.9.2`

My scripts part in angular.json (slick library currently removed, but it was there):

`

"scripts": [

          "node_modules/jquery/dist/jquery.min.js",

          "node_modules/bootstrap/dist/js/bootstrap.min.js",

          "node_modules/startbootstrap-sb-admin/js/sb-admin.js",

          "node_modules/jquery.easing/jquery.easing.min.js",

          "node_modules/chart.js/src/chart.js"

        ]

`

[asterism612]

any idea?

Angular CLI: 7.1.3 Node: 10.11.0 OS: darwin x64 Angular: 7.1.3 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router

Package Version

@angular-devkit/architect 0.11.3 @angular-devkit/build-angular 0.11.4 @angular-devkit/build-optimizer 0.11.4 @angular-devkit/build-webpack 0.11.4 @angular-devkit/core 7.1.3 @angular-devkit/schematics 7.1.3 @angular/cdk 7.2.1 @ngtools/webpack 7.1.4 @schematics/angular 7.1.3 @schematics/update 0.11.3 rxjs 6.3.3 typescript 3.1.6 webpack 4.23.1

[vinims]

Also having this error, anyone found a solution!?

[MalshaDeZ]

Any updates on this?

[MalshaDeZ]

I'm not sure whether this is the correct way, but this did the trick for me. I think the issue occurs because slick.min.js is not loaded , so loading the js file manually before it's needed fixes this issue. Hope this helps.

 constructor( private elementRef: ElementRef){}

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

[phutaneVinayak]

I'm not sure whether this is the correct way, but this did the trick for me. I think the issue occurs because slick.min.js is not loaded , so loading the js file manually before it's needed fixes this issue. Hope this helps.

 constructor( private elementRef: ElementRef){}

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

hi @MalshaDeZ , I found your solution prominent but how can we sure that slick.min.js is not loaded twice if is it not fail to load. as your way i think it might be load twice.

[savras]

Mine was because I added the references under the wrong parent. It had the two "styles" and "script" nodes under different roots ("test", "build" among others) and I accidentally added it to the one under "test" root when it should be under "build".

More specifically, "projects"->"app-name"->"architect"->"build"->"options" instead of "projects"->"app-name"->"architect"->"test" (or something else) ->"options"

Angular Workspace Config link: https://angular.io/guide/workspace-config

[leo6104]

I also got this error when i included some js library which throw error on runtime (in browser).

My scripts section was like below.

              "node_modules/jquery/dist/jquery.min.js",
              "external/image-viewer/image-viewer.js",
              "external/dsp.js",
              "external/object-polyfills.js",
              "node_modules/slick-carousel/slick/slick.min.js",

And external/dsp.js file has some syntax error on runtime.

The reason it can be a problem is that Angular-cli compile all scripts js files to one file scripts.js. like this.

// jQuery minified code
// image-viewer code
// dsp.js code 
//object-polyfills.js code
// slick code 

If dsp.js code has some error, then browser will not run below code. It means if above script raise Exception, the code after Exception will not run.

So, it is not problem with slick-carousel. It depends on other library.

Two kind of things we can do

1. Trying to find the root cause from other library.
2. Change scripts define order of slick-carousel js file path in angular.json - scripts

[TheThai212]

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

//angular.json

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

and rebuild: ng serve

[talamaska]

I have the same error with angular 9. From the stacktrace I think I see unslick called in the first place onDestroy, this in turns calls this.$instance.slick('unslick'); which is really weird cause there is a condition to check if there is an in instance in fact. I wonder if this runOutsideAngular doesn't lose context?

[gabrielsanmor]

changing "useDefineForClassFields": true tsconfig.json seems to have worked, apparently when importing the script the jQuery class is created using define, as such needing this change in tsConfig