1

I have an Angular project that I wanted to update from version 12 to 13

I did everything correctly according to this link which is an angular proposal

My project dependencies:

{
  "name": "ngx-admin",
  "version": "2.3.0",
  "license": "MIT",
  "type": "module",
  "repository": {
  "type": "git",
  "url": "git+https://github.com/akveo/ngx-admin.git"
},
  "bugs": {
  "url": "https://github.com/akveo/ngx-admin/issues"
},
  "browserslist": [
  "> 1%",
  "last 2 versions",
  "IE 11"
],
  "resolutions": {
  "webpack": "^5.0.0"
},
  "scripts": {
  "build.prod": "ng build --configuration production && tar -zcvf archive.tar.gz 
  dist/prod/*",
  "optimizecss": "gulp --gulpfile optimize-css.gulpfile.cjs",
  "postbuild": "gulp compress",
  "ng": "ng",
  "conventional-changelog": "conventional-changelog",
  "start": "ng serve --port 5104",
  "build": "ng build",
  "build:prod": "npm run build -- --configuration production --aot",
  "test": "ng test",
  "test:coverage": "rimraf coverage && npm run test -- --code-coverage",
  "lint": "ng lint",
  "lint:fix": "ng lint ngx-admin-demo --fix",
  "lint:styles": "stylelint ./src/**/*.scss",
  "lint:ci": "npm run lint && npm run lint:styles",
  "pree2e": "webdriver-manager update --standalone false --gecko false",
  "e2e": "ng e2e",
  "docs": "compodoc -p src/tsconfig.app.json -d docs",
  "docs:serve": "compodoc -p src/tsconfig.app.json -d docs -s",
  "prepush": "npm run lint:ci",
  "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md - 
  s",
  "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/ --clean -- 
  sort --format namespaced-json"
},
  "dependencies": {
  "@angular/animations": "^13.3.11",
  "@angular/cdk": "~13.3.9",
  "@angular/common": "^13.3.11",
  "@angular/compiler": "^13.3.11",
  "@angular/core": "^13.3.11",
  "@angular/forms": "^13.3.11",
  "@angular/localize": "~13.0.0",
  "@angular/material": "~13.3.9",
  "@angular/platform-browser": "~13.0.0",
  "@angular/platform-browser-dynamic": "~13.0.0",
  "@angular/router": "^13.3.11",
  "@angular/service-worker": "~13.0.0",
  "@aspnet/signalr": "^3.0.0-preview6.19307.2",
  "@asymmetrik/ngx-leaflet": "8.1.0",
  "@circlon/angular-tree-component": "^11.0.4",
  "@formio/angular": "^5.3.0",
  "@fullcalendar/angular": "^5.1.0",
  "@fullcalendar/core": "^5.1.0",
  "@fullcalendar/daygrid": "^5.1.0",
  "@fullcalendar/interaction": "^5.1.0",
  "@fullcalendar/list": "^5.1.0",
  "@fullcalendar/timegrid": "^5.1.0",
  "@iplab/ngx-color-picker": "^2.1.1",
  "@microsoft/signalr": "^5.0.5",
  "@nebular/eva-icons": "^7.0.0",
  "@nebular/theme": "^7.0.5",
  "@ng-bootstrap/ng-bootstrap": "10.0.0",
  "@ngrx/effects": "^11.1.0",
  "@ngrx/store": "^11.1.0",
  "@ngx-translate/core": "^13.0.0",
  "@ngx-translate/http-loader": "^6.0.0",
  "@swimlane/ngx-charts": "^17.0.1",
  "@types/codemirror": "0.0.108",
  "ag-grid": "^18.1.2",
  "angular-gauge": "^4.0.0",
  "angular-gauge-chart": "^0.7.2",
  "angular-google-charts": "^2.2.1",
  "angular-gridster2": "^11.1.5",
  "angular-responsive-carousel": "^2.1.2",
  "angular2-toaster": "^11.0.1",
  "bootstrap": "^5.1.3",
  "chart.js": "^3.9.1",
  "chartjs-plugin-datalabels": "^1.0.0",
  "chartjs-plugin-zoom": "^1.2.1",
  "codemirror": "^5.60.0",
  "core-js": "3.10.1",
  "eva-icons": "^1.1.3",
  "flag-icon-css": "^3.5.0",
  "font-awesome": "^4.7.0",
  "fontawesome-4.7": "^4.7.0",
  "formiojs": "^4.14.8",
  "gulp-brotli": "^3.0.0",
  "gulp-clean": "^0.4.0",
  "gulp-filter": "^7.0.0",
  "gulp-gzip": "^1.4.2",
  "gulp-purify-css": "^0.1.0",
  "gulp-rename": "^2.0.0",
  "html-webpack-plugin": "^5.5.0",
  "intro.js": "^6.0.0",
  "jalali-moment": "^3.3.10",
  "jquery": "^3.6.0",
  "jqwidgets-ng": "^12.0.4",
  "leaflet": "1.7.1",
  "linq": "^3.2.3",
  "lodash": "^4.17.21",
  "madge": "^5.0.1",
  "moment-duration-format": "^2.3.2",
  "ng-multiselect-dropdown": "^0.3.4",
  "ng-zorro-antd": "^11.4.2",
  "ng2-dnd": "^5.0.2",
  "ng2-jalali-date-picker": "^2.4.2",
  "ng2-tooltip-directive": "~2.9.22",
  "ngx-bootstrap": "^6.2.0",
  "ngx-color": "~7.2.0",
  "ngx-color-picker": "^11.0.0",
  "ngx-filesize": "^2.0.16",
  "ngx-infinite-scroll": "^6.9.1",
  "ngx-loading": "^8.0.0",
  "ngx-permissions": "^8.1.1",
  "ngx-persian": "^1.3.2",
  "ngx-sortablejs": "^11.1.0",
  "ngx-spinner": "^11.0.2",
  "ngx-toastr": "^13.2.1",
  "ngx-ui-switch": "^11.0.1",
  "node-sass": "^4.14.1",
  "npm": "^7.9.0",
  "primeflex": "^3.2.1",
  "primeicons": "^5.0.0",
  "primeng": "^13.4.1",
  "quill": "^1.3.7",
  "rxjs": "^6.6.7",
  "rxjs-compat": "^6.6.7",
  "sass": "^1.53.0",
  "sortablejs": "^1.13.0",
  "sweetalert2": "^10.16.2",
  "swiper": "^6.8.4",
  "tslib": "^2.2.0",
  "webpack": "^4.44.2",
  "zone.js": "~0.11.4"
 },
 "devDependencies": {
  "@angular-devkit/build-angular": "~13.3.9",
  "@angular/cli": "~13.3.9",
  "@angular/compiler-cli": "~13.0.0",
  "@biesbjerg/ngx-translate-extract": "^7.0.4",
  "@compodoc/compodoc": "^1.1.19",
  "@types/intro.js": "^5.1.0",
  "@types/lodash": "^4.14.184",
  "@types/node": "^14.14.39",
  "autoprefixer": "^10.4.7",
  "conventional-changelog-cli": "2.1.1",
  "gulp": "^4.0.2",
  "gulp-util": "^3.0.8",
  "gulp-zip": "^5.1.0",
  "jasmine-core": "~3.7.1",
  "jasmine-spec-reporter": "~7.0.0",
  "karma": "^6.3.17",
  "karma-chrome-launcher": "~3.1.0",
  "karma-coverage-istanbul-reporter": "~3.0.3",
  "karma-jasmine": "~4.0.1",
  "karma-jasmine-html-reporter": "^1.5.4",
  "postcss": "^8.4.14",
  "protractor": "~7.0.0",
  "rimraf": "3.0.2",
  "stylelint": "13.12.0",
  "ts-node": "9.1.1",
  "tslint": "~6.1.0",
  "typescript": "~4.6.4"
 },
  "description": "https://ng-bootstrap.github.io/#/components/datepicker/calendars\r 
  https://stackoverflow.com/questions/34712171/how-to-add-providers-to-injector- 
  dynamically-in-angular-2",
  "homepage": "https://github.com/akveo/ngx-admin#readme",
  "main": "gulpfile.js",
  "author": ""
 }

Now when I npm start the project it gives me an error

An unhandled exception occurred: Class extends value undefined is not a constructor or 
null

I searched for the same error and their solutions did not work for me Because they did not encounter this error to update their Angular project And I checked all my components and everything is working properly

I would be very grateful if you could help me with this problem

davood beheshti
  • 213
  • 1
  • 11

1 Answers1

2

I had a similar issue. After trying many proposed solutions like those in TypeError: Class extends value undefined is not a constructor or null while running next.js which didn't work for me, I finally found out that the issue was with my webpack version. So, I upgraded from "webpack": "^4.46.0" to "webpack": "^5.74.0"

TarHalda
  • 1,050
  • 1
  • 9
  • 27
Klexyclay
  • 39
  • 6