ERROR in Cannot read property '0' of undefined after upgrade to Angular 10

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

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