升级到 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"
  }
}

我使用的是 node 12.15.0 版本和 npm 版本 6.13.4。 请帮忙。

Answer 1

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

Answer 2

Virendra Singh Rathore 是对的

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

在我的情况下，将类转移到另一个文件后出现错误。 VS 代码没有显示错误位置。我必须打开所有文件并查找损坏的“导入”。

Answer 3

就我而言，这是非常基本的。当我试图在我的“组件”中“服务”时，我像导入了一样

import  SetPasswordService  from './set-password.service';

但是在检查每一行之后，我添加了“花括号”它就消失了。

import { SetPasswordService } from './set-password.service';

Answer 4

由于 Angular 无法提供有意义的错误描述，让我们询问 TypeScript 编译器。就我而言，它就像一个魅力，显示了确切的位置和原因：

tsc --project <path-to-your-project>/tsconfig.json

注意，如果有多个 tsconfig，请使用用于构建应用程序的那个，它可能是 tsconfig.app.json 什么的。您可以在angular.json 的options.tsConfig 部分找到它。

Answer 5

我们遇到了同样的问题。在尝试了此列表中的所有内容后，我们更新了所有依赖项，并且给出的消息更具描述性。 这是导致问题的一个导入路径设置不正确。

Answer 6

每次在大合并后运行ng build 或ng serve 时都会出现此错误。对我有用的唯一方法是“分而治之”。我已经移动到一个新的（测试）分支并隔离/删除了来自合并的所有新模块/组件/文件，并且在每次更改后我运行ng build。当错误消失时，我确实撤消了先前删除的文件并隔离了越来越小的块，直到找到错误的根源。对我来说，这是一个错误的导入路径。

Answer 7

就我而言 -->

import { AppModule } from './app/app.module';  //main.ts file
import { ApicallService } from 'src/app/services/apicall.service'; //In a component file

这些是在无法读取未定义的属性“0”中显示错误的原因 错误。所以我通过改变路径来解决它。

import { AppModule } from './app/app/app.module'; //main.ts file
import { ApicallService } from 'src/app/app/services/apicall.service';

Answer 8

不确定您是否已经解决了这个问题，但我已经通过将 Angular（及其依赖项）更新到 10.1.2 解决了这个问题

这就是我实际拥有的。

dependencies": {
"@angular/animations": "~10.1.2",
"@angular/cdk": "^10.2.2",
"@angular/common": "~10.1.2",
"@angular/compiler": "~10.1.2",
"@angular/core": "~10.1.2",
"@angular/forms": "~10.1.2",
"@angular/material": "^10.2.2",
"@angular/platform-browser": "~10.1.2",
"@angular/platform-browser-dynamic": "~10.1.2",
"@angular/router": "~10.1.2",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.  
},

"devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.2",
    "@angular/cli": "~10.0.2",
    "@angular/compiler-cli": "~10.1.3",
    "@types/angular": "^1.7.3",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "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.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.9.5"
  }

Answer 9

从 Angular 9 更新到 10 后，我遇到了同样的错误。

更新开发依赖项后问题为我解决了：

npm update --save-dev 

Answer 10

我还花了几分钟检查问题，简单的ng lint 绝对不会让我丢失或失败导入，但是在执行带有各种标志的 ng lint 时：

ng lint --force=true --typeCheck=true

我发现了其他有助于我解决错误的方法。

我必须进入每个页面/组件和模块来一一检查。

切换所有 VS Code 文件夹并检查 VS Code 的 “问题” 选项卡，从而正确导入。

这发生在我将一个项目复制到另一个项目并删除未使用的引用等等。

Answer 11

在开发模式下运行构建。 ng build 并指出错误的确切位置。

Answer 12

我也有这个错误。我错过了在 package.json 依赖项中添加我在代码中使用的所有包（在我的情况下为 ng-bootstrap），此后错误消失了。

Answer 13

我也有同样的问题。我通过在 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"]
    }
  ]
}