1

I have upgraded Angular from version 15 to 16 And also have upgraded all the dependency packages in my app to latest versions

After Npm i and on running ng serve it throws error as

An unhandled exception occurred: Class extends value undefined is not a constructor or null
See "C:\Users\rxq486\AppData\Local\Temp\ng-3pEwUo\angular-errors.log" for further details.

My Package details on ng v

Angular CLI: 16.2.9
Node: 18.12.0
Package Manager: npm 8.19.2
OS: win32 x64

Angular: 16.2.12

My package.json details

"dependencies": {
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.11",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/localize": "^16.2.12",
    "@angular/material": "^16.2.11",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/platform-server": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@ng-bootstrap/ng-bootstrap": "^15.1.2",
    "@ng-idle/core": "^13.0.1",
    "@ngneat/transloco": "^6.0.0",
    "@types/googlemaps": "3.43.3",
    "@videogular/ngx-videogular": "^8.0.0",
    "ajv": "^8.12.0",
    "angular-resizable-element": "^7.0.2",
    "angular-resize-event": "^3.1.1",
    "angular-svg-icon": "^16.1.0",
    "angular2-draggable": "16.0.0",
    "angular2-hotkeys": "^16.0.1",
    "angular2-virtual-scroll": "^0.4.16",
    "bootstrap": "^5.3.2",
    "buffer": "^6.0.3",
    "core-js": "^3.33.2",
    "dayjs": "^1.11.10",
    "downloadjs": "^1.4.7",
    "esri-loader": "^2.15.0",
    "macaddress": "0.5.3",
    "math-random": "^2.0.1",
    "moment": "^2.29.0",
    "moment-timezone": "^0.5.43",
    "mydatepicker": "^9.0.2",
    "net": "^1.0.2",
    "ng-click-outside": "^9.0.0",
    "ng-drag-drop": "^5.0.0",
    "ng2-right-click-menu": "0.0.16",
    "ng2-toasty": "^4.0.3",
    "ngx-bootstrap": "^11.0.2",
    "ngx-color-picker": "^15.0.0",
    "ngx-mask": "^16.3.9",
    "ngx-toggle-switch": "^2.0.5",
    "original": "1.0.2",
    "panzoom": "^9.2.5",
    "react-scripts": "^5.0.1",
    "rxjs": "^7.8.1",
    "rxjs-compat": "^6.6.7",
    "rxjs-tslint-rules": "^4.34.3",
    "sass.js": "^0.11.1",
    "sockjs-client": "^1.5.0",
    "sshpk": "1.18.0",
    "stompjs": "^2.3.3",
    "stream": "0.0.2",
    "tslib": "2.6.2",
    "underscore": "^1.13.6",
    "url-search-params-polyfill": "^8.2.5",
    "web3": "^4.2.1",
    "worker-timers": "^7.0.77",
    "zone.js": "^0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.1602.9",
    "@angular-devkit/build-angular": "^16.2.9",
    "@angular-devkit/build-optimizer": "^0.1001.4",
    "@angular-devkit/core": "^16.2.9",
    "@angular-devkit/schematics": "^16.2.9",
    "@angular/cli": "^16.2.9",
    "@angular/compiler-cli": "^16.2.12",
    "@angular/language-service": "^16.2.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^14.6.0",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.4",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "^2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "rxjs-tslint": "^0.1.8",
    "sass": "^1.26.10",
    "schematics-scss-migrate": "^1.1.7",
    "ts-node": "~9.0.0",
    "tslint": "~6.1.0",
    "typescript": "^4.8.4",
    "webpack": "^4.44.1"
  },
  "resolutions": {
    "webpack": "^5.0.0"
  }

I tried downgrading Angular-devkit to previous 15v but then also same error

4
  • Have you checked this stackoverflow.com/questions/43176006/…? Commented Nov 6, 2023 at 16:49
  • Hi @Chellappanவ i have resolved the above circular dependency error. But now got many compilation errors for unknown elements after Angular 16 upgrade. Basically the components declared in AppModule are not identified ` error NG8002: Can't bind to 'disabled' since it isn't a known property of 'ui-switch'. 1. If 'ui-switch' is an Angular component and it has 'disabled' input, then verify that it is part of this module. 2. If 'ui-switch' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schema .` Commented Nov 16, 2023 at 4:25
  • Have you upgraded all you dependencies to latest version? Commented Nov 16, 2023 at 4:27
  • Yes i have upgraded all packages to latest version. and those not compatible with ivy has been removed. Basically something seems broken from AppModule, when i import those unknown error components in SharedModule that error is gone. But it doesnt seem right way to fix. Commented Nov 16, 2023 at 5:13

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.