Facing many Typescript compilation issues after Angular upgrade from 15 to 16
Upgraded my app to Angular 16 using below commands updated my Typescript to 4.9.5
ng update @angular/core @angular/cli --force
ng update @angular/material
Then ran npm install ng serve
Got many typescript compilations errors
My package.json
{
"name": "My-App",
"version": "0.0.0",
"license": "CMD",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --configuration production",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^16.2.11",
"@angular/cdk": "^16.2.10",
"@angular/common": "^16.2.11",
"@angular/compiler": "^16.2.11",
"@angular/core": "^16.2.11",
"@angular/forms": "^16.2.11",
"@angular/localize": "^16.2.11",
"@angular/material": "^16.2.10",
"@angular/platform-browser": "^16.2.11",
"@angular/platform-browser-dynamic": "^16.2.11",
"@angular/platform-server": "^16.2.11",
"@angular/router": "^16.2.11",
"@ng-bootstrap/ng-bootstrap": "^12.1.2",
"@ng-idle/core": "^9.0.0-beta.1",
"@types/googlemaps": "3.39.1",
"@videogular/ngx-videogular": "^7.0.1",
"ajv": "^6.12.4",
"angular-resizable-element": "^5.0.0",
"angular-resize-event": "^3.1.1",
"angular-svg-icon": "^14.0.0",
"angular2-draggable": "2.3.2",
"angular2-hotkeys": "^2.2.0",
"angular2-virtual-scroll": "^0.4.16",
"bootstrap": "^5.1.3",
"buffer": "^5.6.0",
"core-js": "^3.21.1",
"dayjs": "^1.11.7",
"downloadjs": "^1.4.7",
"esri-loader": "^2.15.0",
"macaddress": "0.5.1",
"math-random": "^2.0.1",
"moment": "^2.29.0",
"moment-timezone": "^0.5.31",
"mydatepicker": "^9.0.2",
"net": "^1.0.2",
"ng-click-outside": "^7.0.0",
"ng-drag-drop": "^5.0.0",
"ng2-right-click-menu": "0.0.16",
"ng2-toasty": "^4.0.3",
"ngx-bootstrap": "^7.0.0",
"ngx-color-picker": "^10.0.1",
"ngx-mask": "^13.1.1",
"ngx-toggle-switch": "^2.0.5",
"original": "1.0.2",
"panzoom": "^9.2.5",
"react-scripts": "^3.4.3",
"rxjs": "^6.6.3",
"rxjs-compat": "^6.6.7",
"rxjs-tslint-rules": "^4.34.3",
"sass.js": "^0.11.1",
"sockjs-client": "^1.5.0",
"sshpk": "1.16.1",
"stompjs": "^2.3.3",
"stream": "0.0.2",
"tslib": "1.10.0",
"underscore": "^1.13.6",
"url-search-params-polyfill": "^8.1.0",
"web3": "^1.2.11",
"worker-timers": "^7.0.38",
"zone.js": "^0.13.3"
},
"devDependencies": {
"@angular-devkit/architect": "^0.1602.8",
"@angular-devkit/build-angular": "^16.2.8",
"@angular-devkit/build-optimizer": "^0.1001.4",
"@angular-devkit/core": "^16.2.8",
"@angular/cli": "^16.2.8",
"@angular/compiler-cli": "^16.2.11",
"@angular/language-service": "^16.2.11",
"@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.9.5",
"webpack": "^4.44.1"
},
"peerDependencies": {
"tslib": "1.10.0"
},
"resolutions": {
"webpack": "^5.0.0"
}
}
Errors like
- error NG8004: No pipe found with name 'imgTranslate'.
- error NG8002: Can't bind to 'src' since it isn't a known property of 'svg-icon'.
- If 'svg-icon' is an Angular component and it has 'src' input, then verify that it is part of this module.
- If 'svg-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
- To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.