Cannot read property 'autoUpdate' of undefined

[Lucky-Goyal]

TypeError: Cannot read property 'autoUpdate' of undefined at HTMLDivElement.N (http://localhost:4200/scripts.bundle.js:12:593) at HTMLDivElement. (http://localhost:4200/scripts.bundle.js:11:6429) at Function.each (http://localhost:4200/scripts.bundle.js:4:2861) at n.fn.init.each (http://localhost:4200/scripts.bundle.js:4:845) at n.fn.init.destroy (http://localhost:4200/scripts.bundle.js:11:6232) at n.fn.init.e.fn.(anonymous function) [as mCustomScrollbar] (http://localhost:4200/scripts.bundle.js:12:6801) at http://localhost:4200/vendor.bundle.js:22637:82 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2801:26) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (http://localhost:4200/polyfills.bundle.js:2551:43) at NgZone.webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular (http://localhost:4200/vendor.bundle.js:85993:83) at HTMLDivElement.N (http://localhost:4200/scripts.bundle.js:12:593) at HTMLDivElement. (http://localhost:4200/scripts.bundle.js:11:6429) at Function.each (http://localhost:4200/scripts.bundle.js:4:2861) at n.fn.init.each (http://localhost:4200/scripts.bundle.js:4:845) at n.fn.init.destroy (http://localhost:4200/scripts.bundle.js:11:6232) at n.fn.init.e.fn.(anonymous function) [as mCustomScrollbar] (http://localhost:4200/scripts.bundle.js:12:6801) at http://localhost:4200/vendor.bundle.js:22637:82 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2801:26) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run (http://localhost:4200/polyfills.bundle.js:2551:43) at NgZone.webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular (http://localhost:4200/vendor.bundle.js:85993:83) at resolvePromise (http://localhost:4200/polyfills.bundle.js:3233:31) at resolvePromise (http://localhost:4200/polyfills.bundle.js:3204:17) at http://localhost:4200/polyfills.bundle.js:3282:17 at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2834:31) at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:86030:33) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2833:36) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2601:47) at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3011:35) at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:2912:21) at invokeTask (http://localhost:4200/polyfills.bundle.js:3949:14) defaultErrorLogger @ core.es5.js:1020 webpackJsonp.../../../core/@angular/core.es5.js.ErrorHandler.handleError @ core.es5.js:1080 next @ core.es5.js:4503 schedulerFn @ core.es5.js:3635 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:238 webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next @ Subscriber.js:185 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next @ Subscriber.js:125 webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next @ Subscriber.js:89 webpackJsonp.../../../../rxjs/Subject.js.Subject.next @ Subject.js:55 webpackJsonp.../../../core/@angular/core.es5.js.EventEmitter.emit @ core.es5.js:3621 (anonymous) @ core.es5.js:3912 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:392 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.run @ zone.js:142 webpackJsonp.../../../core/@angular/core.es5.js.NgZone.runOutsideAngular @ core.es5.js:3844 onHandleError @ core.es5.js:3912 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.handleError @ zone.js:396 webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runGuarded @ zone.js:158 _loop_1 @ zone.js:702 api.microtaskDrainDone @ zone.js:711 drainMicroTaskQueue @ zone.js:610 webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:503 invokeTask @ zone.js:1540 globalZoneAwareCallback @ zone.js:1566

[jSchez]

Hello, I have faced same issue. Probably is because the element you are applying the directive into is created with *ngIf. I switched from ngIf to [hidden] and the error is gone for me.

Hope it helps, Best regards;

[Lucky-Goyal]

Thanks for your reply.

[lyon-liao]

@jSchez the [hidden] can not solve my issue. I change the router the directive will destroy, and the error will emit. Any idea to solve it?

[jSchez]

Hello liaosong, depending on the situation maybe more convenient to use the service to handle custom initialization and removal of the scrollbars. In my case I had to end up doing like that :/

Another approach is to create another component to handle the scrollbar along with the service, so that scope is already isolated.

Hope it helps, let me know. Best regards;

[lyon-liao]

@jSchez Thanks for your reply. As you saied above，I changed to use service to init the scrollbar instead of the directive. And it work for me When router change. Though there is a work way to solve it, But the directive still not work in sometime. Do you have idea to fix it?

[jfcere]

@liaosong can you reproduce the problem in a plunker?

[lyon-liao]

@jfcere The plunker.

the scroll directive in default router, and it's work well. Change the router to other the error will be throw.

[jSchez]

Hello @liaosong , I have updated your plunker by implementing the scrollbar service. Seems it is working fine, please let me know.

Edit: it is true that when using the directive the component gets autoUpdate error. Seems an issue with ngZone.

Best regards; https://plnkr.co/edit/yDiqy0LzzH216AaAj07d?p=preview

[lyon-liao]

@jSchez Thanks. I know it, I said above. The plunker is to show the error when use directive.

I think the container component will destroy before the directive destroy.

[jSchez]

Yup ! agree

[jfcere]

Thanks @liaosong, I am pretty busy this week but I'll try to take a look at it this weekend to see if I can do anything to help the situation.

[jfcere]

This is an issue related to Malihu Custom Scrollbar Plugin: https://github.com/malihu/malihu-custom-scrollbar-plugin/issues/392

I've come up with a "dirty" workaround when using the directive which is to catch the error when it happens and just do nothing to avoid this to break angular.

Just update to v1.2.3 to get the fix.

I updated your Plunker to new release version to show it works.