"ERROR in Cannot read property 'map' of undefined" after updating from Angular 7 to 8

Question

I have got a strange error after upgrading from Angular 7 to 8. Everytime I start the program with npm start the following error occurs: "ERROR in Cannot read property 'map' of undefined".

There is no more information on the console, so I couldn't find where the cause is. Therefore I have tried to comment out every occurance of .map in my code. Unfortunately the same error occurs. Additionly I updated all dependencies, but nothing has worked.

Has someone else got a similar problem after upgrading from 7 to 8? My package.json looks like this:

  "name": "test",
  "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": {
    "@angular/animations": "^8.2.14",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "^8.2.14",
    "@angular/core": "^8.2.14",
    "@angular/flex-layout": "^8.0.0-beta.27",
    "@angular/forms": "~8.2.14",
    "@angular/material": "^7.3.7",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "^8.2.14",
    "@angular/router": "~8.2.14",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "apollo-angular": "^1.8.0",
    "apollo-angular-link-http": "^1.9.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "apollo-link": "^1.2.13",
    "core-js": "^2.6.11",
    "graphql": "^14.6.0",
    "graphql-tag": "^2.10.3",
    "hammerjs": "^2.0.8",
    "ng2-split-pane": "^1.4.0",
    "ng2-tooltip-directive": "^2.8.17",
    "ngx-infinite-scroll": "^8.0.1",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "typescript": "^3.6.4",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.24",
    "@angular/cli": "^8.3.25",
    "@angular/compiler-cli": "^9.0.4",
    "@angular/language-service": "~8.2.14",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "^2.0.8",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^4.4.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^2.0.6",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.4.3",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0"
  },
  "browser": {
    "fs": false,
    "os": false,
    "path": false
  }
}

Console log:

> ng serve

0% compiling
Compiling @angular/core : es2015 as esm2015
10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.01 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 684 bytes [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 35 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 340 kB [initial] [rendered]
Date: 2020-02-29T17:32:51.227Z - Hash: 5c477ba64195de423e38 - Time: 3371ms

ERROR in Cannot read property 'map' of undefined
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
i ｢wdm｣: Failed to compile.

Answer 1

It could be that @angular/compiler-cli has the wrong version (8.x). Hope that helps.

Answer 2

This comment on Github helped me. Remove the package-lock.json file and the node_modules folder. Make sure all packages with @angular/* are the same version. Also, I needed to fix my typescript package version and the @angular-devkit/build-angular.

For me, I was upgrading from Angular 8.xx.yy to Angular 12.0.2. Here is my package.json file

"dependencies": {
    "@angular/animations": "~12.0.2",
    "@angular/common": "~12.0.2",
    "@angular/core": "~12.0.2",
    "@angular/forms": "~12.0.2",
    "@angular/platform-browser": "~12.0.2",
    "@angular/platform-browser-dynamic": "~12.0.2",
    "@angular/router": "~12.0.2",
    ...
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1102.13",
    "@angular/cli": "~12.0.2",
    "@angular/compiler": "~12.0.2",
    "@angular/compiler-cli": "~12.0.2",
    "@angular/language-service": "~12.0.2",
    ...
    "typescript": "^4.2.4"
  }

You might notice the package, "@angular-devkit/build-angular", is not 12.0.2 or 0.1200.2. I am not too sure about this. At the time of publishing this answer, my version used to be ^0.803.29. I guess it does not follow the same version convention as the other angular packages. I checked the npm repo, and they do have a 12.0.2 version. I tried to install it, but that did not work. I then tried to install 0.1200.2 but that version was not found. So I just decided to try and install the latest 0.11* version and that worked. Everything is compiling now.