Webpack升级到Angular后报错10

Question

I just performed an upgrade from Angular 6 to Angular 10 for our application. I have gone through various component and module TypeScript files, and have fixed any imports that became outdated, and weren't mapping correctly.

I kept getting an error when I would run ng serve that would say the following:

ERROR in Cannot read property '0' of undefined

This would usually hang up in the terminal for a moment, then output file-specific errors underneath it.

I would fix those errors. Once it quit giving me them, I still get the same above error, with nothing underneath it. Something I did notice is that most errors involve angular dependencies transitioning from em2015 to esm2015.

I can run ng serve --verbose=true and get some additional output. It appears that something in webpack is hanging up the build process.

I have experienced numerous problems with @angular/dev-kit before and thought I could be experiencing more. I went ahead and did a clean uninstall re-install. Nothing different.

When I upgraded all dependencies in the application, I uninstalled everything, deleted the node_modules folder, force cleaned cache, and reinstalled everything.

Does anyone have any idea of what can be causing webpack to fail? I have attached my package.json, and the output of ng serve --verbose=true .

{
  "name": "ng-cosm-crm",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@ag-grid-community/angular": "^23.2.1",
    "@ag-grid-enterprise/all-modules": "^23.2.1",
    "@angular-devkit/schematics": "^10.0.8",
    "@angular/animations": "^10.0.14",
    "@angular/cdk": "^10.1.3",
    "@angular/cli": "^10.0.8",
    "@angular/common": "^10.0.14",
    "@angular/compiler": "^10.0.14",
    "@angular/core": "^10.0.14",
    "@angular/forms": "^10.0.14",
    "@angular/material": "^10.1.3",
    "@angular/platform-browser": "^10.0.14",
    "@angular/platform-browser-dynamic": "^10.0.14",
    "@angular/platform-server": "^10.0.14",
    "@angular/router": "^10.0.14",
    "@angular/service-worker": "^10.0.14",
    "@fullcalendar/core": "^5.3.0",
    "accounting-js": "^1.1.1",
    "ag-grid": "^18.1.2",
    "ag-grid-angular": "^23.2.1",
    "ag-grid-community": "^23.2.1",
    "ag-grid-enterprise": "^23.2.1",
    "angular-2-local-storage": "^3.0.2",
    "angular-file-saver": "^1.1.3",
    "angular2-indexeddb": "^1.2.3",
    "angular2-logger": "^0.7.0",
    "angular2-multiselect-dropdown": "^4.6.3",
    "angular2-tinymce": "^3.3.0",
    "angular2-uuid": "^1.1.1",
    "barcode-scanner": "0.0.2",
    "blend4web": "^18.5.0",
    "bootstrap": "^4.5.2",
    "bootstrap-select": "^1.13.18",
    "chart.js": "^2.9.3",
    "core-js": "^3.6.5",
    "currency-formatter": "^1.5.6",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "json-schema": "^0.2.5",
    "json-stringify-safe": "^5.0.1",
    "jspdf": "^2.1.0",
    "jspdf-autotable": "^3.5.9",
    "latest-version": "^5.1.0",
    "lodash.isequal": "^4.5.0",
    "mdbootstrap": "~4.19.1",
    "moment": "^2.27.0",
    "moment-timezone": "^0.5.31",
    "ng-connection-service": "^1.0.4",
    "ng2-cache": "^0.2.1",
    "ng2-carouselamos": "^4.1.0",
    "ng2-chosen": "0.0.2-beta5",
    "ng2-select": "^2.0.0",
    "ngx-device-detector": "2.0.0",
    "ngx-hm-carousel": "^1.7.2",
    "ngx-mask": "^10.0.1",
    "node-gyp": "^7.1.0",
    "pdfmake": "^0.1.68",
    "pngjs3": "^5.1.10",
    "primeng": "^9.1.3",
    "quagga": "^0.12.1",
    "quill": "^1.3.7",
    "resize-observer-polyfill": "^1.5.1",
    "rxjs": "6.6.2",
    "rxjs-compat": "6.6.2",
    "tinymce": "^5.4.2",
    "tslib": "^2.0.1",
    "userpilot": "^1.1.7",
    "xlsx": "^0.16.6",
    "zone.js": "~0.11.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1000.8",
    "@angular/compiler-cli": "^10.0.14",
    "@types/jasmine": "3.5.14",
    "@types/node": "^14.6.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.2",
    "karma": "~5.1.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.3",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "^1.5.4",
    "protractor": "~7.0.0",
    "ts-node": "~9.0.0",
    "tslint": "~6.1.3",
    "typescript": "^3.9.6",
    "webpack": "^4.44.1"
  }
}

I am running Node version 12.18.3 and NPM 6.14.6

Answer 1

This upgrade problem was entirely to do with rxjs not upgrading correctly. Once it correctly updated, I was able to get actual errors and go through them one by one to actually get the app to serve.

Do not miss the RXJS step of the Angular upgrade if you are jumping from rxjs 5 to 6!

The biggest time consuming element of this upgrade was rxjs itself. For example going from .map().mergeMap().tap() to .pipe(map(), take()).subscribe() etc.