Angular9升级Angular14报错：无法读取undefined的'Crypto'属性

问题描述 #

我们按照官方升级指引完成Angular 9到Angular 14的全流程升级操作后，执行ng serve启动应用时页面无任何内容加载，控制台抛出错误：cannot read properties of undefined (reading 'Crypto')。

当前项目package.json配置如下：

{
  "name": "ui-angular",
  "version": "1.0.0",
  "license": "ORG",
  "scripts": {
    "ng": "ng",
    "nx": "nx",
    "start": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --source-map=false",
    "start_dev": "node --max_old_space_size=8192 node_modules/@angular/cli/bin/ng serve --configuration=dev_server --source-map=false",
    "build:dev_server": "ng build --configuration=dev_server",
    "build:prod": "node --max_old_space_size=12288 node_modules/@angular/cli/bin/ng build --configuration=production --source-map=false"

  },
  "private": true,
  "dependencies": {
    "@angular-redux/store": "^10.0.0",
    "@angular/animations": "^14.0.5",
    "@angular/cdk": "^9.2.3",
    "@angular/common": "^14.0.5",
    "@angular/compiler": "^14.0.5",
    "@angular/core": "^14.0.5",
    "@angular/forms": "^14.0.5",
    "@angular/platform-browser": "^14.0.5",
    "@angular/platform-browser-dynamic": "^14.0.5",
    "@angular/router": "^14.0.5",
    "@ctrl/tinycolor": "^3.4.0",
    "@grapecity/ar-designer": "^15.2.0",
    "@grapecity/ar-viewer": "^14.2.2764",
    "@kolkov/angular-editor": "^1.0.0",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "@nrwl/angular": "9.2.4",
    "@types/device-uuid": "^1.0.0",
    "@types/raphael": "^2.3.1",
    "angular-user-idle": "^2.2.7",
    "angular-xslt": "^0.2.1",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "^4.4.1",
    "bootstrap-icons": "^1.4.0",
    "canvg": "^3.0.7",
    "chart.js": "3.4.0",
    "chartjs-plugin-datalabels": "2.0.0",
    "convert-units": "^2.3.4",
    "core-js": "2.5.0",
    "date-fns": "^2.21.1",
    "device-uuid": "^1.0.4",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "immer": "^7.0.0",
    "infinite-scroll": "^3.0.6",
    "jquery": "^3.5.1",
    "lodash": "^4.17.15",
    "moment": "^2.24.0",
    "ng2-charts": "3.0.0-rc.5",
    "ng2-signalr": "^10.1.0",
    "ngx-color-picker": "^9.1.0",
    "ngx-dynamic-hooks": "^1.7.0",
    "ngx-extended-pdf-viewer": "^8.2.0",
    "ngx-infinite-scroll": "^10.0.0",
    "ngx-print": "1.2.0-beta.6",
    "ngx-xml2json": "^1.0.2",
    "org-new-ui-el": "1.1.12",
    "popper.js": "1.16.0",
    "primeicons": "2.0.0",
    "quill": "^1.3.7",
    "raphael": "^2.3.0",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.8",
    "redux-freeze": "^0.1.7",
    "redux-thunk": "^2.3.0",
    "rxjs": "~6.5.4",
    "signalr": "^2.4.2",
    "tslib": "^2.0.0",
    "tui-image-editor": "^3.14.3",
    "uuid": "^8.3.2",
    "webpack": "^4.46.0",
    "xlsx": "^0.16.9",
    "xml-formatter": "^2.4.0",
    "xmldom-ts": "^0.3.1",
    "xslt-ts": "^1.1.8",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "14.0.5",
    "@angular/cli": "^14.0.5",
    "@angular/compiler-cli": "^14.0.5",
    "@angular/language-service": "^14.0.5",
    "@compodoc/compodoc": "^1.1.11",
    "@nrwl/jest": "9.2.4",
    "@nrwl/workspace": "9.2.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/jest": "25.1.4",
    "@types/node": "~8.9.4",
    "codelyzer": "5.2.2",
    "dotenv": "6.2.0",
    "eslint": "6.8.0",
    "husky": "^4.3.0",
    "jasmine-core": "~3.5.0",
    "jasmine-marbles": "^0.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "jest": "25.2.3",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "1.1.0",
    "karma-spec-reporter": "^0.0.32",
    "prettier": "1.19.1",
    "pretty-quick": "^3.1.0",
    "protractor": "~7.0.0",
    "sonar-scanner": "^3.1.0",
    "ts-jest": "25.2.1",
    "ts-node": "~7.0.0",
    "tslint": "~6.1.0",
    "tslint-html-report": "^2.0.3",
    "typescript": "~4.6.4"
  }
}

待确认问题：

• 是否有其他开发者遇到过同类报错？
• 错误中提到的Crypto和本次升级故障有什么关联？

问题根因与解决方案 #

这是Angular跨多版本升级时非常常见的依赖不匹配问题，和Crypto相关的触发点从依赖列表里就能直接定位，不少开发者跨大版本升级时都踩过同类坑：

根因说明 #

• Angular生态包版本断层：项目中@angular/cdk还停留在9.2.3版本，和Angular 14核心包差了5个大版本。Angular CDK 14内部会调用全局Web Crypto API生成组件唯一标识，旧版本CDK和Angular 14渲染层交互时拿不到正确的全局上下文，读取Crypto属性时就会抛出undefined错误。另外项目里的@nrwl/angular、@nrwl/workspace等Nx相关包都停留在9.x版本，和Angular 14完全不兼容，也会干扰构建时的全局对象注入逻辑。
• 老旧第三方库兼容问题：依赖的device-uuid是多年未维护的旧库，内部直接读取window.Crypto生成设备指纹。Angular 14默认启用了更严格的全局对象访问校验，加上项目里还残留着@nguniversal/module-map-ngfactory-loader、aspnet-prerendering这类Angular 5时代的SSR预渲染依赖，预渲染阶段不存在window对象，读取Crypto属性自然会报错。
• 类型依赖不匹配：项目里@types/node还停留在8.x版本，完全不满足Angular 14要求的Node.js 14+运行环境，会导致构建时全局类型校验异常，放大上述问题。
• 基础依赖版本不达标：当前rxjs版本为6.5.4，Angular 14最低要求rxjs 7.4.0，版本不匹配也会导致框架内部运行逻辑异常。

修复步骤 #

• 先对齐Angular官方生态包版本：执行ng update @angular/cdk@14把CDK升级到和核心包一致的14.0.5版本，同时把rxjs升级到7.x以上版本。
• 清理无效老旧依赖：直接卸载@nguniversal/module-map-ngfactory-loader这类早已废弃的SSR包，如果项目不需要预渲染功能，同步移除aspnet-prerendering相关依赖；如果需要保留SSR能力，要把所有SSR相关包升级到匹配Angular 14的版本。
• 替换不兼容的第三方库：卸载device-uuid，换用维护状态正常的UUID生成库，如果暂时无法替换，要在调用该库的位置增加全局对象判断，避免非浏览器环境下直接读取window属性报错。
• 升级Nrwl相关包到适配Angular 14的版本，也可以临时注释Nx相关构建配置先验证启动效果。
• 升级@types/node到14.15.0以上版本，匹配Angular 14的Node.js运行要求。
• 最后执行全量依赖清理：删除node_modules目录和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令后再尝试启动。

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