search

devmark / ngx-slick

angular6 a wrapper for slick plugin
109 stars 46 forks source link

Cannot read property 'slick' of undefined #6

Closed snaik2064 closed 6 years ago

snaik2064 commented 7 years ago

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 commented 7 years ago

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

Taewa commented 7 years ago

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 commented 7 years ago

@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();
    };`
  1. 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 commented 7 years ago

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

elic28 commented 7 years ago

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

gabosvk commented 7 years ago

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

gabosvk commented 7 years ago

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 commented 7 years ago

@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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

Closed. open new issue if any question.

polaris327 commented 6 years ago

@devmark Why closed? Is that fixed???

arun-maddheshia commented 6 years ago

@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 commented 6 years ago

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 commented 4 years ago

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