fix MutationObserver with Zone.js

packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.esm.js

@@ -1,8 +1,9 @@
-import { Component, ElementRef, Input, NgModule } from '@angular/core';
+import { Component, ElementRef, NgZone, Input, NgModule } from '@angular/core';
 import OverlayScrollbars from 'overlayscrollbars';
 
 var OverlayScrollbarsComponent = (function () {
-    function OverlayScrollbarsComponent(_osTargetRef) {
+    function OverlayScrollbarsComponent(_osTargetRef, ngZone) {
+        this.ngZone = ngZone;
         this._osInstance = null;
         this._osTargetRef = _osTargetRef;
     }
@@ -13,7 +14,10 @@ var OverlayScrollbarsComponent = (function () {
         return this._osTargetRef.nativeElement || null;
     };
     OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {
-        this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
+        var _this = this;
+        this.ngZone.runOutsideAngular((function () {
+            _this._osInstance = OverlayScrollbars(_this.osTarget(), _this._options || {}, _this._extensions);
+        }));
     };
     OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {
         if (OverlayScrollbars.valid(this._osInstance)) {
@@ -36,7 +40,8 @@ var OverlayScrollbarsComponent = (function () {
                 },] },
     ];
     OverlayScrollbarsComponent.ctorParameters = function () { return [
-        { type: ElementRef }
+        { type: ElementRef },
+        { type: NgZone }
     ]; };
     OverlayScrollbarsComponent.propDecorators = {
         _options: [{ type: Input, args: ['options',] }],

packages/overlayscrollbars-ngx/dist/overlayscrollbars-ngx.js

@@ -7,7 +7,8 @@
     OverlayScrollbars = OverlayScrollbars && OverlayScrollbars.hasOwnProperty('default') ? OverlayScrollbars['default'] : OverlayScrollbars;
 
     var OverlayScrollbarsComponent = (function () {
-        function OverlayScrollbarsComponent(_osTargetRef) {
+        function OverlayScrollbarsComponent(_osTargetRef, ngZone) {
+            this.ngZone = ngZone;
             this._osInstance = null;
             this._osTargetRef = _osTargetRef;
         }
@@ -18,7 +19,10 @@
             return this._osTargetRef.nativeElement || null;
         };
         OverlayScrollbarsComponent.prototype.ngAfterViewInit = function () {
-            this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
+            var _this = this;
+            this.ngZone.runOutsideAngular((function () {
+                _this._osInstance = OverlayScrollbars(_this.osTarget(), _this._options || {}, _this._extensions);
+            }));
         };
         OverlayScrollbarsComponent.prototype.ngOnDestroy = function () {
             if (OverlayScrollbars.valid(this._osInstance)) {
@@ -41,7 +45,8 @@
                     },] },
         ];
         OverlayScrollbarsComponent.ctorParameters = function () { return [
-            { type: core.ElementRef }
+            { type: core.ElementRef },
+            { type: core.NgZone }
         ]; };
         OverlayScrollbarsComponent.propDecorators = {
             _options: [{ type: core.Input, args: ['options',] }],

packages/overlayscrollbars-ngx/dist/types/index.metadata.json

@@ -1 +1 @@
-{"__symbolic":"module","version":4,"metadata":{"OverlayScrollbarsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"overlay-scrollbars","host":{"class":"os-host","$quoted$":["class"]},"template":"\n        <div class=\"os-resize-observer-host\"></div>\n        <div class=\"os-padding\">\n            <div class=\"os-viewport\">\n                <div class=\"os-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-horizontal \">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-vertical\">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar-corner\"></div>\n    ","styles":[":host { display: block; }"]}]}],"members":{"_options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["options"]}]}],"_extensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5},"arguments":["extensions"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":30}]}],"osInstance":[{"__symbolic":"method"}],"osTarget":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"OverlayscrollbarsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}],"exports":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}]}]}],"members":{}}},"origins":{"OverlayScrollbarsComponent":"../../src/overlayscrollbars.component","OverlayscrollbarsModule":"../../src/overlayscrollbars.module"},"importAs":"overlayscrollbars-ngx"}
+{"__symbolic":"module","version":4,"metadata":{"OverlayScrollbarsComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"overlay-scrollbars","host":{"class":"os-host","$quoted$":["class"]},"template":"\n        <div class=\"os-resize-observer-host\"></div>\n        <div class=\"os-padding\">\n            <div class=\"os-viewport\">\n                <div class=\"os-content\">\n                    <ng-content></ng-content>\n                </div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-horizontal \">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar os-scrollbar-vertical\">\n            <div class=\"os-scrollbar-track\">\n                <div class=\"os-scrollbar-handle\"></div>\n            </div>\n        </div>\n        <div class=\"os-scrollbar-corner\"></div>\n    ","styles":[":host { display: block; }"]}]}],"members":{"_options":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":5},"arguments":["options"]}]}],"_extensions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":5},"arguments":["extensions"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":35,"character":30},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":35,"character":58}]}],"osInstance":[{"__symbolic":"method"}],"osTarget":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"ngOnDestroy":[{"__symbolic":"method"}],"ngOnChanges":[{"__symbolic":"method"}]}},"OverlayscrollbarsModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":3,"character":1},"arguments":[{"imports":[],"declarations":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}],"exports":[{"__symbolic":"reference","name":"OverlayScrollbarsComponent"}]}]}],"members":{}}},"origins":{"OverlayScrollbarsComponent":"../../src/overlayscrollbars.component","OverlayscrollbarsModule":"../../src/overlayscrollbars.module"},"importAs":"overlayscrollbars-ngx"}

packages/overlayscrollbars-ngx/dist/types/overlayscrollbars.component.d.ts

@@ -1,11 +1,12 @@
-import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
+import { ElementRef, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone } from '@angular/core';
 import OverlayScrollbars from 'overlayscrollbars';
 export declare class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterViewInit {
+    private ngZone;
     private _options;
     private _extensions;
     private _osInstance;
     private _osTargetRef;
-    constructor(_osTargetRef: ElementRef);
+    constructor(_osTargetRef: ElementRef, ngZone: NgZone);
     osInstance(): OverlayScrollbars | null;
     osTarget(): HTMLDivElement | null;
     ngAfterViewInit(): void;

packages/overlayscrollbars-ngx/example/package-lock.json

@@ -1187,7 +1187,6 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
       "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
       "dev": true,
-      "optional": true,
       "requires": {
         "delegates": "^1.0.0",
         "readable-stream": "^2.0.6"
@@ -2414,8 +2413,7 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "constants-browserify": {
       "version": "1.0.0",
@@ -2820,8 +2818,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -3909,8 +3906,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -3931,14 +3927,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -3953,20 +3947,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -4083,8 +4074,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -4096,7 +4086,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -4111,7 +4100,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -4119,14 +4107,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -4145,7 +4131,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -4226,8 +4211,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -4239,7 +4223,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4325,8 +4308,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4362,7 +4344,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -4382,7 +4363,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -4426,14 +4406,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -4442,7 +4420,6 @@
       "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.12.tgz",
       "integrity": "sha512-WvJ193OHa0GHPEL+AycEJgxvBEwyfRkN1vhjca23OaPVMCaLCXTd5qAu82AjTcgP1UJmytkOKb63Ypde7raDIg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "inherits": "~2.0.0",
@@ -4455,7 +4432,6 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
-      "optional": true,
       "requires": {
         "aproba": "^1.0.3",
         "console-control-strings": "^1.0.0",
@@ -4493,8 +4469,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
       "integrity": "sha1-uWjGsKBDhDJJAui/Gl3zJXmkUP4=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "get-stream": {
       "version": "3.0.0",
@@ -4724,8 +4699,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -5472,8 +5446,7 @@
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "is-windows": {
       "version": "1.0.2",
@@ -6189,7 +6162,6 @@
       "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
       "integrity": "sha1-lWkFcI1YtLq0wiYbBPWfMcmTdMA=",
       "dev": true,
-      "optional": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "parse-json": "^2.2.0",
@@ -6202,8 +6174,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -6490,8 +6461,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
       "integrity": "sha1-2TPOuSBdgr3PSIb2dCvcK03qFG0=",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "map-visit": {
       "version": "1.0.0",
@@ -7145,7 +7115,6 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
-      "optional": true,
       "requires": {
         "are-we-there-yet": "~1.1.2",
         "console-control-strings": "~1.1.0",
@@ -8277,7 +8246,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
       "integrity": "sha1-9f+qXs0pyzHAR0vKfXVra7KePyg=",
       "dev": true,
-      "optional": true,
       "requires": {
         "load-json-file": "^1.0.0",
         "normalize-package-data": "^2.3.2",
@@ -8289,7 +8257,6 @@
           "resolved": "https://registry.npmjs.org/path-type/-/path-type-1.1.0.tgz",
           "integrity": "sha1-WcRPfuSR2nBNpBXaWkBwuk+P5EE=",
           "dev": true,
-          "optional": true,
           "requires": {
             "graceful-fs": "^4.1.2",
             "pify": "^2.0.0",
@@ -8300,8 +8267,7 @@
           "version": "2.3.0",
           "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
           "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
-          "dev": true,
+          "dev": true
-          "optional": true
         }
       }
     },
@@ -8310,7 +8276,6 @@
       "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-1.0.1.tgz",
       "integrity": "sha1-nWPBMnbAZZGNV/ACpX9AobZD+wI=",
       "dev": true,
-      "optional": true,
       "requires": {
         "find-up": "^1.0.0",
         "read-pkg": "^1.0.0"
@@ -8321,7 +8286,6 @@
           "resolved": "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz",
           "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "path-exists": "^2.0.0",
             "pinkie-promise": "^2.0.0"
@@ -8332,7 +8296,6 @@
           "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-2.1.0.tgz",
           "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
           "dev": true,
-          "optional": true,
           "requires": {
             "pinkie-promise": "^2.0.0"
           }
@@ -9629,7 +9592,6 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
       "integrity": "sha1-YhmoVhZSBJHzV4i9vxRHqZx+aw4=",
       "dev": true,
-      "optional": true,
       "requires": {
         "is-utf8": "^0.2.0"
       }
@@ -11028,7 +10990,6 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
       "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "string-width": "^1.0.2 || 2"
       }

packages/overlayscrollbars-ngx/package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "overlayscrollbars-ngx",
-    "version": "0.1.1",
+    "version": "0.2.0",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
@@ -1265,8 +1265,7 @@
                 "ansi-regex": {
                     "version": "2.1.1",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "aproba": {
                     "version": "1.2.0",
@@ -1287,14 +1286,12 @@
                 "balanced-match": {
                     "version": "1.0.0",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "brace-expansion": {
                     "version": "1.1.11",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "balanced-match": "^1.0.0",
                         "concat-map": "0.0.1"
@@ -1309,20 +1306,17 @@
                 "code-point-at": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "concat-map": {
                     "version": "0.0.1",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "console-control-strings": {
                     "version": "1.1.0",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "core-util-is": {
                     "version": "1.0.2",
@@ -1439,8 +1433,7 @@
                 "inherits": {
                     "version": "2.0.3",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "ini": {
                     "version": "1.3.5",
@@ -1452,7 +1445,6 @@
                     "version": "1.0.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "number-is-nan": "^1.0.0"
                     }
@@ -1467,7 +1459,6 @@
                     "version": "3.0.4",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "brace-expansion": "^1.1.7"
                     }
@@ -1475,14 +1466,12 @@
                 "minimist": {
                     "version": "0.0.8",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "minipass": {
                     "version": "2.3.5",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "safe-buffer": "^5.1.2",
                         "yallist": "^3.0.0"
@@ -1501,7 +1490,6 @@
                     "version": "0.5.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "minimist": "0.0.8"
                     }
@@ -1582,8 +1570,7 @@
                 "number-is-nan": {
                     "version": "1.0.1",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "object-assign": {
                     "version": "4.1.1",
@@ -1595,7 +1582,6 @@
                     "version": "1.4.0",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "wrappy": "1"
                     }
@@ -1681,8 +1667,7 @@
                 "safe-buffer": {
                     "version": "5.1.2",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "safer-buffer": {
                     "version": "2.1.2",
@@ -1718,7 +1703,6 @@
                     "version": "1.0.2",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "code-point-at": "^1.0.0",
                         "is-fullwidth-code-point": "^1.0.0",
@@ -1738,7 +1722,6 @@
                     "version": "3.0.1",
                     "bundled": true,
                     "dev": true,
-                    "optional": true,
                     "requires": {
                         "ansi-regex": "^2.0.0"
                     }
@@ -1782,14 +1765,12 @@
                 "wrappy": {
                     "version": "1.0.2",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 },
                 "yallist": {
                     "version": "3.0.3",
                     "bundled": true,
-                    "dev": true,
+                    "dev": true
-                    "optional": true
                 }
             }
         },

packages/overlayscrollbars-ngx/src/overlayscrollbars.component.ts

@@ -1,4 +1,4 @@
-import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit } from '@angular/core';
+import { Component, ElementRef, Input, SimpleChanges, OnDestroy, OnChanges, AfterViewInit, NgZone } from '@angular/core';
 import OverlayScrollbars from 'overlayscrollbars';
 
 @Component({
@@ -33,7 +33,7 @@ export class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterVi
     private _osInstance: OverlayScrollbars | null = null;
     private _osTargetRef: ElementRef;
     
-    constructor(_osTargetRef: ElementRef) {
+    constructor(_osTargetRef: ElementRef, private ngZone: NgZone) {
         this._osTargetRef = _osTargetRef;
     }
 
@@ -46,7 +46,9 @@ export class OverlayScrollbarsComponent implements OnDestroy, OnChanges, AfterVi
     }
 
     ngAfterViewInit() {
-        this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
+        this.ngZone.runOutsideAngular(() => {
+            this._osInstance = OverlayScrollbars(this.osTarget(), this._options || {}, this._extensions);
+        });
     }
 
     ngOnDestroy() {