typescript - Build errors after Upgrading from Angular 8 to 9

Question

I have an Angular application that is hosted in a .net core 3.1 application. I upgraded from 8 to 9 following the official guide and now my application won't build. I get the following errors:

"Module not found: Error: Can't resolve '@angular/cdk/layout/breakpoints'", "Field 'browser' doesn't contain a valid alias configuration resolve as module looking for modules in No description file found Field 'browser' doesn't contain a valid alias configuration No description file found no extension Field 'browser' doesn't contain a valid alias configuration /@angular/cdk/layout/breakpoints doesn't exist .ts"

I get the same errors above for @angular/material/core/common-behaviors, @angular/material/core/datetime, and @angular/material/core/ripple.

I've included all the files that I thought may be helpful. I've been trying to fix this for ages and have run out of ideas. This is very frustrating, Please help.

package.json:

{
  "name": "myapp",
  "private": true,
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --live-reload=false",
    "build": "ng build",
    "build:ssr": "ng run MIC:server:dev",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "eslint": "eslint src/**/*.ts",
    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
  },
  "postcss": {},
  "dependencies": {
    "@angular/animations": "9.0.0",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "9.0.0",
    "@angular/compiler": "9.0.0",
    "@angular/core": "9.0.0",
    "@angular/flex-layout": "9.0.0-beta.29",
    "@angular/forms": "9.0.0",
    "@angular/material": "9.0.0",
    "@angular/material-moment-adapter": "^9.0.0",
    "@angular/platform-browser": "9.0.0",
    "@angular/platform-browser-dynamic": "9.0.0",
    "@angular/platform-server": "9.0.0",
    "@angular/router": "9.0.0",
    "@fortawesome/angular-fontawesome": "0.6.0",
    "@fortawesome/fontawesome-svg-core": "1.2.27",
    "@fortawesome/free-regular-svg-icons": "5.12.1",
    "@fortawesome/free-solid-svg-icons": "5.12.1",
    "@microsoft/signalr": "3.1.0",
    "@microsoft/signalr-protocol-msgpack": "3.1.0",
    "@ng-bootstrap/ng-bootstrap": "^5.2.1",
    "@ng-select/ng-select": "^3.7.2",
    "@nguniversal/module-map-ngfactory-loader": "9.0.0-next.1",
    "@popperjs/core": "2.0.5",
    "@swimlane/ngx-charts": "13.0.2",
    "angular-dual-listbox": "5.0.1",
    "angular2-notifications": "3.0.0",
    "aspnet-prerendering": "^3.0.1",
    "bootstrap": "4.4.1",
    "classlist.js": "1.1.20150312",
    "core-js": "3.6.4",
    "date-fns": "2.9.0",
    "hammer-timejs": "1.1.0",
    "hammerjs": "2.0.8",
    "hash-sum": "2.0.0",
    "immutable": "3.8.2",
    "intl": "1.2.5",
    "jquery": "3.4.1",
    "jwt-decode": "2.2.0",
    "material-design-icons": "3.0.1",
    "moment": "^2.24.0",
    "ng-validator": "2.0.0",
    "ngx-material-timepicker": "5.3.0",
    "oidc-client": "1.10.1",
    "primeicons": "2.0.0",
    "primeng-lts": "8.1.4",
    "rxjs": "6.5.4",
    "tippy.js": "5.2.0",
    "web-animations-js": "2.3.2",
    "zone.js": "0.10.2"
  },
  "devDependencies":
  {
    "@angular-devkit/build-angular": "^0.900.1",
    "@angular-devkit/core": "9.0.1",
    "@angular-eslint/builder": "0.0.1-alpha.18",
    "@angular-eslint/eslint-plugin": "0.0.1-alpha.18",
    "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.18",
    "@angular-eslint/template-parser": "0.0.1-alpha.18",
    "@angular/cli": "^9.0.1",
    "@angular/compiler-cli": "9.0.0",
    "@angular/language-service": "9.0.0",
    "@intervolga/optimize-cssnano-plugin": "1.0.6",
    "@types/jasmine": "3.5.3",
    "@types/jasminewd2": "2.0.8",
    "@types/jwt-decode": "2.2.1",
    "@types/node": "13.7.0",
    "@typescript-eslint/eslint-plugin": "2.19.0",
    "@typescript-eslint/eslint-plugin-tslint": "2.19.0",
    "@typescript-eslint/parser": "2.19.0",
    "autoprefixer": "9.7.4",
    "codelyzer": "5.2.1",
    "eslint": "^6.8.0",
    "jasmine-core": "3.5.0",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "4.4.1",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "2.1.1",
    "karma-jasmine": "3.1.0",
    "karma-jasmine-html-reporter": "1.5.2",
    "karma-scss-preprocessor": "4.0.0",
    "typescript": "3.7.5"
  },
  "optionalDependencies": {
    "node-sass": "4.13.1",
    "protractor": "6.0.0",
    "ts-node": "8.6.2"
  }
}

Answer 1

Try that:

• rollback all the changes
• remove node_modules folder
• npm i / yarn
• npm install @angular/cli -g
• ng update @angular/cli @angular/core --force
• ng update --all --force

if you have angular material add @angular/material to the last command
if you want to see changes via git commits add --create-commits