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

时间：2020-08-14 12:51:30

标签： javascript angular typescript

我将我的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版本。 请帮忙。

13 个答案:

答案 0 :(得分：4)

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

答案 1 :(得分：3)

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

答案 2 :(得分：3)

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

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

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

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

切换所有VS Code文件夹，然后检查VS Code的“问题” 标签，然后对导入进行纠正。

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

答案 3 :(得分：1)

以dev模式运行构建。 ng build，它会指出错误的确切位置。

答案 4 :(得分：1)

不确定您是否已解决此问题，但我已通过将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"
  }

答案 5 :(得分：1)

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

答案 6 :(得分：1)

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

答案 7 :(得分：0)

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

更新开发人员依赖项后，问题已为我解决：

npm update --save-dev

答案 8 :(得分：0)

就我而言-> 

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';

答案 9 :(得分：0)

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

答案 10 :(得分：0)

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

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

请注意，如果有多个tsconfig，请使用意在构建您的应用程序的tsconfig，它可能是tsconfig.app.json。您可以在options.tsConfig的{​​{1}}部分下找到它。

答案 11 :(得分：0)

就我而言，这是非常基本的。当我尝试在“组件”中进行“维修”时，我的输入方式是

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

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

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

答案 12 :(得分：0)

Virendra Singh Rathore 是对的

<块引用>

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

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

相关问题
最新问题