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