Angular9迁移至11后出现Cannot read property 'defaultView' of undefined错误原因咨询

这个错误我之前帮人排查过，核心原因是Nebular版本和你升级后的Angular 11不兼容，具体来说是Nebular的NbViewportRulerAdapter组件没有适配Angular 11中滚动模块（scrolling）的API变化。

错误根源拆解 #

从你提供的错误堆栈能清晰看到：

TypeError: Cannot read property 'defaultView' of undefined at NbViewportRulerAdapter._getWindow (scrolling.js:665)

这个问题出在Nebular的NbViewportRulerAdapter服务初始化时，它依赖Angular核心的ViewportRuler服务，但Angular 9到11的升级中，ViewportRuler的初始化逻辑、依赖注入方式都有了调整。旧版本的Nebular仍按照Angular 9的逻辑去调用API，导致无法正确获取到document对象，进而访问defaultView（即浏览器的window对象）时出现undefined。

具体解决步骤 #

1. 升级Nebular到兼容Angular 11的版本

Angular 11对应的Nebular稳定版本是6.x系列（比如6.2.0），如果你的Nebular版本低于这个范围，直接执行升级：

# 升级核心主题模块
npm install @nebular/theme@6.2.0 --save
# 同步升级其他Nebular依赖（如auth、icons等）
npm install @nebular/auth@6.2.0 @nebular/eva-icons@6.2.0 --save

2. 清理并重构依赖树

• 打开package.json，确保所有Angular相关包（@angular/core、@angular/common、@angular/cdk等）都是11.x的稳定版本，避免混合不同版本的依赖。
• 执行以下命令彻底清理缓存和依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

3. 验证模块导入配置

确认NbThemeModule在你的AppModule中正确初始化，不要在APP_INITIALIZER或其他提前执行的逻辑中调用依赖NbViewportRulerAdapter的服务：

import { NgModule } from '@angular/core';
import { NbThemeModule } from '@nebular/theme';

@NgModule({
  imports: [
    // 确保正确初始化Nebular主题模块
    NbThemeModule.forRoot({ name: 'default' }),
    // 其他模块...
  ],
})
export class AppModule { }

4. （可选）修复自定义Viewport相关代码

如果你的项目中有自定义的基于Angular ViewportRuler的代码，检查是否适配了Angular 11的API变化，比如getViewportSize()方法的返回值结构、初始化方式等。

内容的提问来源于stack exchange，提问作者user1313848