Cannot read property 'slick' of undefined

[snaik2064]

I am currently using ngx-slick@0.1.1 & angular version 4.2. After any router navigation i am getting this error

Uncaught (in promise): TypeError: Cannot read property 'slick' of undefined
TypeError: Cannot read property 'slick' of undefined.

& getting this console

removeSlide SlickItemDirective {el: ElementRef, carousel: SlickComponent}

Because of this error our projects navigation fails although slick is working fine. So is there any configuration to solve this error?

[Taewa]

@snaik2064 @devmark
Having same issue. Did you resolve it?

[Taewa]

Just a quick and probably not appropriate solution but working.

in ngx-slick folder, open index.js and find SlickComponent.prototype.unslick...
inside of this method, comment _this.$instance.slick('unslick');
Then you are able to navigate.

@devmark Please let us know how can we fix this issue.

Thanks.

[snaik2064]

@devmark @Taewa I am able to resolve this issue. The actual problem is inside

ngx-slick.umd.js In which there are two code blocks:
1.

`SlickComponent.prototype.ngOnDestroy = function () {
        this.unslick();
    };`

SlickItemDirective.prototype.ngOnDestroy = function () {
        this.carousel.removeSlide(this);

so the real problem is if we are using "slick" inside OneComponent and then we are navigating to TwoComponent, then due to routing OneComponent get destroys along with our "slick" configuration variable.
And after that our "slick" library runs above two blocks which need component's slick configuration, which is not available because it's already destroyed and we get mentioned error.(Cannot read property 'slick' of undefined)

By commenting those both blocks you can achieve successful routing.(Not Recommended for live project)
Because this changes are inside node_modules so it should be made by ngx-slick package author in next version.

[gabosvk]

+1 - waiting for fix to be implemented....

[elic28]

+1 - waiting for fix to be implemented....

[gabosvk]

+1 - waiting for fix to be implemented....

[gabosvk]

Just adding my observation - I'm using webpack with my angular2 app and the workaround steps @snaik2064 mentioned in his answer needed to be commented out not in ngx-slick.umd.js but in index.js in the same directory. Maybe lame but I was struggling with this for couple of hours couldn't understand why the "commented out" parts are still used...

[snaik2064]

@gabosvk I have implemented Angular 4 project with systemJS, so there might be a difference between implementation of webpack and systemJS. So ngx-slick.umd.js solution works for me. I will also try your solution whether it works for me or not.

But whether it's ngx-slick.umd.js or index.js , this correction should be done inside this repo so everyone's bug will get resolved.

[depiction]

Since this only occurs when there are no slides, you can use the ngIf structural directive to only include the element or component containing the carousel if there is at least one slide.

<app-carousel [slides]="slides" *ngIf="slides.length"></app-carousel>

[vgflutter]

depiction, I leave a view that has a ngx-slick for a new view that hasn't slide.
I don't understand your comment.
for the author:
do you want to fix this bug??!?!?!

[devmark]

Closed. open new issue if any question.

[polaris327]

@devmark Why closed? Is that fixed???

[arun-maddheshia]

@devmark please reopen i still getting this error or provide some documentation to fix let get out of this issue

ERROR TypeError: _this.$instance.slick is not a function
    at ngx-slick.umd.js:78
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at NgZone.push../node_modules/@angular/core/esm5/core.js.NgZone.runOutsideAngular (core.js:4708)
    at SlickComponent.push../node_modules/ngx-slick/ngx-slick.umd.js.SlickComponent.initSlick (ngx-slick.umd.js:70)
    at SlickComponent.push../node_modules/ngx-slick/ngx-slick.umd.js.SlickComponent.addSlide (ngx-slick.umd.js:113)
    at SlickItemDirective.push../node_modules/ngx-slick/ngx-slick.umd.js.SlickItemDirective.ngAfterViewInit (ngx-slick.umd.js:256)
    at callProviderLifecycles (core.js:12748)
    at callElementProvidersLifecycles (core.js:12715)
    at callLifecycleHooksChildrenFirst (core.js:12698)

[alfredorico]

Same issue from here. Please reopen!

ERROR TypeError: "_this.$instance.slick is not a function" initSlickwebpack-internal:///./node_modules/ngx-slick/ngx-slick.umd.js:78:13invokewebpack-internal:///./node_modules/zone.js/dist/zone.js:388:17runwebpack-internal:///./node_modules/zone.js/dist/zone.js:138:24node_modulesangular/core/esm5/core.js:4913:54initSlickwebpack-internal:///./node_modules/ngx-slick/ngx-slick.umd.js:70:9addSlidewebpack-internal:///./node_modules/ngx-slick/ngx-slick.umd.js:113:13ngAfterViewInitwebpack-internal:///./node_modules/ngx-slick/ngx-slick.umd.js:256:9

[miguelcamposdev]

Someone has the solution for this warning??? I'm trying to use the ViewChild to control next and prev slides and I get this warning:

ERROR TypeError: Cannot read property 'slickNext' of undefined

I have defined:

@ViewChild('slickModal', {static: true}) public slickModal: SlickCarouselComponent;
and this is my HTML:

<ngx-slick-carousel #slickModal="slick-carousel" [config]="slideConfig">