Cannot read property 'defaultView' of undefined error with angular 11.0.0-rc.0

[xmlking]

after upgrading to angular 11.0.0-rc.0 , getting the following error

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'defaultView' of undefined
TypeError: Cannot read property 'defaultView' of undefined
at NbViewportRulerAdapter._getWindow (vendor.js:137233)
at vendor.js:137148
at ZoneDelegate.invoke (zone-evergreen.js:368)
at Zone.run (zone-evergreen.js:130)
at NgZone.runOutsideAngular (vendor.js:94965)
at new ViewportRuler (vendor.js:137146)
at new NbViewportRulerAdapter (vendor.js:36207)
at Object.NbViewportRulerAdapter_Factory [as factory] (vendor.js:36234)
at R3Injector.hydrate (vendor.js:78845)
at R3Injector.get (vendor.js:78667)
at resolvePromise (zone-evergreen.js:1209)
at resolvePromise (zone-evergreen.js:1163)
at zone-evergreen.js:1275
at ZoneDelegate.invokeTask (zone-evergreen.js:402)
at Object.onInvokeTask (vendor.js:95026)
at ZoneDelegate.invokeTask (zone-evergreen.js:401)
at Zone.runTask (zone-evergreen.js:174)
at drainMicroTaskQueue (zone-evergreen.js:578)
defaultErrorLogger @ vendor.js:71754

[mruknowme]

The same issue after updating to stable Angular 11

[EvgenyProkopovich]

The same issue. Angular 11.0.0. Nebular 6.2.1

[nathane2019]

I had a similar issue, I am running angular 10 and in order for me to resolve the issue I checked the peer dependencies of the nebular module and verified that it aligns to the cdk version in your package.json. I had to downgrade my version to 10.2.1. For some reason it installed cdk 11

[Sliverb]

Another solution if you want to stay with angular 11 is to patch the nebula package till its updated. The issue is the new ViewportRuler requires the document to be passed into its constructor, so you can have NbViewportRulerAdapter pass this in its super call

You will need patch-package and run it postinstall

Files to patch are

@nebular/theme/bundles/theme.umd.js
@nebular/theme/esm2015/components/cdk/adapter/viewport-ruler-adapter.js
@nebular/theme/fesm2015/index.js

Here is the resulting patched file

diff --git a/node_modules/@nebular/theme/bundles/theme.umd.js b/node_modules/@nebular/theme/bundles/theme.umd.js
index e83ea41..3d2e858 100644
--- a/node_modules/@nebular/theme/bundles/theme.umd.js
+++ b/node_modules/@nebular/theme/bundles/theme.umd.js
@@ -1057,7 +1057,7 @@ var NbOverlayContainerAdapter = /** @class */ (function (_super) {
 var NbViewportRulerAdapter = /** @class */ (function (_super) {
     tslib.__extends(NbViewportRulerAdapter, _super);
     function NbViewportRulerAdapter(platform, ngZone, ruler, scroll) {
-        var _this = _super.call(this, platform, ngZone) || this;
+        var _this = _super.call(this, platform, ngZone, document) || this;
         _this.ruler = ruler;
         _this.scroll = scroll;
         return _this;
diff --git a/node_modules/@nebular/theme/esm2015/components/cdk/adapter/viewport-ruler-adapter.js b/node_modules/@nebular/theme/esm2015/components/cdk/adapter/viewport-ruler-adapter.js
index 2485b14..58884ad 100644
--- a/node_modules/@nebular/theme/esm2015/components/cdk/adapter/viewport-ruler-adapter.js
+++ b/node_modules/@nebular/theme/esm2015/components/cdk/adapter/viewport-ruler-adapter.js
@@ -6,7 +6,7 @@ import { NbLayoutRulerService } from '../../../services/ruler.service';
 import { NbLayoutScrollService } from '../../../services/scroll.service';
 export class NbViewportRulerAdapter extends ViewportRuler {
     constructor(platform, ngZone, ruler, scroll) {
-        super(platform, ngZone);
+        super(platform, ngZone, document);
         this.ruler = ruler;
         this.scroll = scroll;
     }
diff --git a/node_modules/@nebular/theme/fesm2015/index.js b/node_modules/@nebular/theme/fesm2015/index.js
index 289ff0a..c34d9a2 100644
--- a/node_modules/@nebular/theme/fesm2015/index.js
+++ b/node_modules/@nebular/theme/fesm2015/index.js
@@ -959,7 +959,7 @@ NbOverlayContainerAdapter.decorators = [
 
 class NbViewportRulerAdapter extends ViewportRuler {
     constructor(platform, ngZone, ruler, scroll) {
-        super(platform, ngZone);
+        super(platform, ngZone, document);
         this.ruler = ruler;
         this.scroll = scroll;
     }

[mruknowme]

Thank you @Sliverb, it worked. What I did:

1. npm i patch-package
2. Make changes as @Sliverb described above
3. I was getting errors as described here error: Error: spawnSync git ENOBUFS ds300/patch-package#166 (comment), so I made changes as described in comment 166
4. npx patch-package patch-package
5. npx patch-package @nebular/theme
6. Add patch-package to postinstall in packages.json
7. rm -rf ./node_modules (didn't work until I deleted and reinstalled)
8. npm i

Should be good to go.

Also, as a side note, it was still failing for me on node 15.2.1, npm 7.0.3, with nvm downgraded to latest node 14.x.x npm 6.x.x and it worked

[almarro1]

I submitted a pull request to fix this problem following the concept in #2572 (comment)
Hope admins approve the request soon

[arpansac]

+1 Setup a project yesterday and today it's stopped working

[petrot]

Any info about the fixing PR?

[zackstam]

I just changed version cdk to "@angular/cdk": "^10.2.7", it works

[yggg]

Fixed in the 7th version.