Angular 14迁移后浏览器报Uncaught TypeError错误求助

问题描述 #

已将Angular应用迁移至Angular 14，并更新所有包及依赖。代码构建成功，执行ng serve无报错，但浏览器中出现如下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'document')
    at main.js:1:2247633
    at dt.exports.21 (main.js:1:2411389)
    at d (main.js:1:2195929)
    at main.js:1:2195963

项目package.json内容 #

{  
  "name": "lupita-portal",  
  "version": "1.0.0",  
  "scripts": {    
    "ng": "ng",    
    "start": "ng serve",    
    "build": "ng build",    
    "test": "ng test",    
    "lint": "ng lint",    
    "e2e": "ng e2e"  
  },  
  "private": true,  
  "dependencies": {    
    "10": "^0.0.1",    
    "-": "^0.0.1",    
    "@angular/animations": "^14.2.8",    
    "@angular/common": "^14.2.8",    
    "@angular/compiler": "^14.2.8",    
    "@angular/core": "^14.2.8",    
    "@angular/forms": "^14.2.8",    
    "@angular/localize": "^14.2.8",    
    "@angular/platform-browser": "^14.2.8",    
    "@angular/platform-browser-dynamic": "^14.2.8",    
    "@angular/router": "^14.2.8",    
    "@microsoft/signalr": "^6.0.10",    
    "@ngx-i18nsupport/tooling": "^1.0.1",    
    "@ngx-translate/i18n-polyfill": "^1.0.0",    
    "@progress/kendo-angular-buttons": "^8.0.0",    
    "@progress/kendo-angular-common": "^3.0.0",    
    "@progress/kendo-angular-dateinputs": "^7.1.1",    
    "@progress/kendo-angular-dialog": "^7.0.0",    
    "@progress/kendo-angular-dropdowns": "^7.0.0",    
    "@progress/kendo-angular-excel-export": "^5.0.0",    
    "@progress/kendo-angular-grid": "^7.4.2",    
    "@progress/kendo-angular-inputs": "^9.0.5",    
    "@progress/kendo-angular-intl": "^4.0.0",    
    "@progress/kendo-angular-l10n": "^4.0.0",    
    "@progress/kendo-angular-label": "^4.0.0",    
    "@progress/kendo-angular-layout": "^7.0.0",    
    "@progress/kendo-angular-menu": "^4.1.1",    
    "@progress/kendo-angular-pdf-export": "^4.0.0",    
    "@progress/kendo-angular-popup": "^5.0.0",    
    "@progress/kendo-angular-progressbar": "^3.0.0",    
    "@progress/kendo-angular-sortable": "^2.1.0",    
    "@progress/kendo-angular-treeview": "^7.0.0",    
    "@progress/kendo-data-query": "^1.0.0",    
    "@progress/kendo-drawing": "^1.6.0",    
    "@progress/kendo-licensing": "^1.0.2",    
    "@progress/kendo-theme-default": "^5.0.0",    
    "acorn": "^7.1.0",    
    "angular-oauth2-oidc": "^13.0.1",    
    "classlist.js": "^1.1.20150312",    
    "core-js": "^3.26.0",    
    "crypto-js": "^3.1.9-1",    
    "events": "^3.0.0",    
    "file-saver": "^2.0.5",    
    "flexboxgrid": "^6.3.1",    
    "jquery": "^3.4.1",    
    "ngx-bootstrap": "^4.3.0",    
    "node-sass": "^7.0.3",    
    "openseadragon": "^3.1.0",    
    "plotly.js": "^2.18.1",    
    "plotly.js-cartesian-dist": "^1.50.1",    
    "raw-loader": "^4.0.2",    
    "rxjs": "^7.8.1",    
    "rxjs-compat": "^6.6.7",    
    "ta-json": "^2.5.0",    
    "ts-node": "^10.9.1",    
    "tslib": "1.9.0",    
    "typescript": "^4.8.4",    
    "zone.js": "^0.11.8"  
  },  
  "devDependencies": {    
    "@angular-devkit/build-angular": "^14.2.11",    
    "@angular/cli": "^14.2.8",    
    "@angular/compiler-cli": "^14.2.8",    
    "@angular/language-service": "^14.2.8",    
    "@ngx-i18nsupport/ngx-i18nsupport": "^1.0.1",    
    "@types/crypto-js": "^3.1.43",    
    "@types/jasmine": "^4.3.0",    
    "@types/jasminewd2": "2.0.3",    
    "@types/node": "^18.11.9",    
    "codelyzer": "^4.5.0",    
    "jasmine-core": "2.99.1",    
    "jasmine-spec-reporter": "4.2.1",    
    "karma": "^6.4.2",    
    "karma-chrome-launcher": "2.2.0",    
    "karma-coverage-istanbul-reporter": "2.0.1",    
    "karma-jasmine": "1.1.2",    
    "karma-jasmine-html-reporter": "0.2.2",    
    "protractor": "^3.3.0",    
    "tslint": "5.11.0"  
  }
}

1. 清理无效依赖 #

package.json中存在"10": "^0.0.1"和"-": "^0.0.1"两个无效依赖，直接卸载：

npm uninstall 10 -

2. 升级不兼容的第三方依赖 #

• ngx-bootstrap：当前4.3.0版本适配Angular 8-9，与Angular 14不兼容，升级到适配版本：

  npm install ngx-bootstrap@^11.0.2 --save
  

• angular-oauth2-oidc：升级到Angular 14兼容版本：

  npm install angular-oauth2-oidc@^14.0.0 --save
  

• openseadragon：检查并升级到适配现代Angular的版本，或确认其初始化时机在Angular平台启动后。

3. 规范浏览器API访问方式 #

避免在模块/服务构造函数中直接访问document，改用Angular官方注入方式：

import { Inject, Injectable } from '@angular/core';
import { DOCUMENT } from '@angular/common';

@Injectable()
export class YourService {
  constructor(@Inject(DOCUMENT) private document: Document) {}
}

第三方库初始化逻辑放到Angular平台启动完成后：

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(() => {
    // 在此初始化第三方库
  })
  .catch(err => console.error(err));

4. 清理缓存并重新构建 #

rm -rf node_modules package-lock.json
npm install
ng build --delete-output-path
ng serve

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