升级到 Angular 10 后无法读取未定义的属性“0”中的错误

Question

我将我的 angular 应用程序从版本 8 升级到版本 10。现在运行 ng serve 后，我遇到了单行错误 无法读取未定义的属性 '0' 这看起来非常抽象的错误。

我尝试清除 npm 缓存，删除 package.lock.json 文件，删除 node_modules，然后再次安装 npm 包，但似乎没有任何帮助。

下面是我的 package.json 文件

{
  "name": "app-name",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@agm/core": "^1.1.0",
    "@agm/js-marker-clusterer": "^1.1.0",
    "@angular/animations": "~10.0.9",
    "@angular/cdk": "~10.1.3",
    "@angular/common": "~10.0.9",
    "@angular/compiler": "~10.0.9",
    "@angular/core": "~10.0.9",
    "@angular/forms": "~10.0.9",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "~10.0.9",
    "@angular/platform-browser-dynamic": "~10.0.9",
    "@angular/router": "~10.0.9",
    "@types/googlemaps": "^3.39.12",
    "angular-material-badge": "^1.2.91",
    "angular-notifier": "^6.0.1",
    "azure-maps-control": "^2.0.20",
    "bootstrap": "^4.4.1",
    "crypto-js": "^4.0.0",
    "dateformat": "^3.0.3",
    "dropbox": "^5.2.1",
    "iv-viewer": "^2.0.1",
    "js-marker-clusterer": "^1.0.0",
    "mammoth": "^1.4.9",
    "ng-inline-svg": "^10.0.0",
    "ng2-image-viewer": "^3.0.5",
    "ng2-pdf-viewer": "^6.0.2",
    "ngx-doc-viewer": "1.0.0",
    "ngx-light-carousel": "1.0.20",
    "ngx-pagination": "^5.0.0",
    "ngx-perfect-scrollbar": "^9.0.0",
    "ngx-permissions": "^7.0.3",
    "rxjs": "~6.6.2",
    "rxjs-compat": "^6.6.2",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.5",
    "@angular/cli": "~10.0.5",
    "@angular/compiler-cli": "~10.0.9",
    "@angular/language-service": "~10.0.9",
    "@types/jasmine": "~3.5.12",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@types/office-js": "^1.0.123",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~3.3.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.10.2",
    "tslint": "~6.1.0",
    "typescript": "~3.9.7"
  }
}

我正在使用节点 12.15.0 版本和 npm 版本 6.13.4。请帮忙。

Answer 1

我有同样的问题。我通过在 vs 代码调试器中运行 ng serve 并让它因未处理的错误而中断来追踪堆栈跟踪。

对我来说，错误是：

Exception has occurred: TypeError: Cannot read property '0' of undefined
  at Object.typeToValue (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/type_to_value.js:45:66)
    at /workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/typescript.js:75:58
    at Array.map (<anonymous>)
    at TypeScriptReflectionHost.getConstructorParameters (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/reflection/src/typescript.js:57:36)
    at Object.getConstructorDependencies (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/util.js:29:36)
    at extractInjectableCtorDeps (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/injectable.js:232:72)
    at InjectableDecoratorHandler.analyze (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/annotations/src/injectable.js:72:31)
    at TraitCompiler.analyzeTrait (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:346:40)
    at analyze (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:298:58)
    at _loop_1 (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:320:21)
    at TraitCompiler.analyzeClass (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:326:35)
    at visit (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:108:27)
    at visitNodes (/workingcopypath//node_modules/typescript/lib/typescript.js:18956:30)
    at Object.forEachChild (/workingcopypath//node_modules/typescript/lib/typescript.js:19189:24)
    at visit (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:110:20)
    at TraitCompiler.analyze (/workingcopypath//node_modules/@angular/compiler-cli/src/ngtsc/transform/src/compilation.js:112:13)

有问题的失败代码是这一行：

return noValueDeclaration(typeNode, decl.declarations[0]); 

我仍在寻找修复程序，但至少这应该有助于调试问题。

你可以使用这个来做到这一点 .vscode/launch.json

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Ng Serve",
      "skipFiles": ["<node_internals>/**"],
      "cwd": "${workspaceFolder}",
      "program": "./node_modules/.bin/ng",
      "args": ["serve", "--verbose=true"]
    }
  ]
}

Answer 2

这都是关于错误的进口。您正在尝试导入不存在的文件或它们的位置不同:)