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

Question

I upgraded my angular application from version 8 to version 10. Now after running ng serve I am getting below one-liner error ERROR in Cannot read property '0' of undefined This looks very abstract error.

I tried clearing npm cache, deleted the package.lock.json file, deleted node_modules, and install the npm packages again but nothing seems to help me.

Below is my package.json file

{
  "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"
  }
}

I am using node 12.15.0 version and npm version 6.13.4. Please help.

Answer 1

I'm having the same issue. I tracked down the stack trace by running ng serve in the vs code debugger and having it break on unhandled errors.

For me the error is:

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)

The failing code in question is this line:

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

I'm still looking for the fix, but at least this should help debug the issue.

You can do this using this .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

I had this error too. I was missing to add all the packages I used in my code in the package.json depencencies (in my case ng-bootstrap ), after this the error vanished.

Answer 3

I also spent a few minutes checking the issue and the simple ng lint was definitely not throw me to missing or failed imports, but when executing the ng lint with various flags like this:

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

I found other things that helped me get to the error.

I had to go into each Page/Component and Module to check one by one.

Toggle all the VS Code folders and checking the "Problems" tab of the VS Code and thus right the imports.

This happened to me replicating one project to another and removing unused references and so on.

Answer 4

Since Angular didn't manage to provide a meaningful error description, let's ask TypeScript compiler for it. In my case it worked like a charm, showing the exact place and reason:

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

Pay attention, in case of several tsconfig's, use the one intended to build your application, it might be tsconfig.app.json whatever. You can find it out under the options.tsConfig section of angular.json .

Answer 5

It's all about wrong imports. You are trying to import the files that does not exist or their location is different:)

Answer 6

Run the build in dev mode. ng build and it points the error at the exact place.

Answer 7

Not sure if you have already fixed this problem, but I've solved it by updating Angular (and it's dependencies) into 10.1.2

Here's what I have actually.

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 8

I got this error every time a ran ng build or ng serve after a big merge. The only way that worked for me was by 'divide and conquer'. I have moved to a new (test) branch and isolated/deleted all new modules/components/files that have come from merge and after every change I ran ng build . When the error disappeared, I did undo previously deleted files and isolated smaller and smaller chunks until I got to the source of error. For me it was a wrong import path.

Answer 9

I had the same error after updating from Angular 9 to 10.

The problem was solved for me after updating dev dependencies:

npm update --save-dev 

Answer 10

In my Case -->

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

These are are the reasons that showing me ERROR in Cannot read property '0' of undefined Error. So I solved it with changing the paths.

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

Answer 11

We had the same issue. After trying everything from this list, we updated all the dependencies and the message which was given was more descriptive. It was one import path that wasn't set correctly that caused the issue.

Answer 12

In my case it's very basic one. when I'm trying to "service" in my "component", i imported like

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

But after checking each line, I added "curly braces" it's gone.

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

Answer 13

Virendra Singh Rathore is right

It's all about wrong imports. Your are trying to import the files that do not exist or their location is different:)

In my situation, the error appeared after transferring classes to another file. VS code didn't show the error location. I had to open all the files and look for corrupted 'imports'.