While Upgrade My App From Angular 11 To 12 , After Run ng update @angular/core@12 @angular/cli@12 , and run yarn start , the following error displayed :
[Error After Run Angular in version 12][1]
[1]: https://i.stack.imgur.com/4wGim.png
Package.json
{
"dependencies": {
"@agm/core": "^3.0.0-beta.0",
"@agm/drawing": "^3.0.0-beta.0",
"@angular/animations": "^12.2.16",
"@angular/cdk": "^11.2.13",
"@angular/common": "^12.2.16",
"@angular/compiler": "^12.2.16",
"@angular/core": "^12.2.16",
"@angular/forms": "^12.2.16",
"@angular/http": "^6.1.0",
"@angular/material": "^11.2.13",
"@angular/platform-browser": "^12.2.16",
"@angular/platform-browser-dynamic": "^12.2.16",
"@angular/platform-server": "^12.2.16",
"@angular/router": "^12.2.16",
"@aspnet/signalr": "^1.0.2",
"@devexpress/analytics-core": "^19.2.4",
"@fancyapps/fancybox": "^3.1.25",
"@kolkov/angular-editor": "^0.13.1",
"@ng-plus/signature-pad": "0.0.5",
"@progress/kendo-angular-buttons": "^5.2.2",
"@progress/kendo-angular-charts": "^4.1.4",
"@progress/kendo-angular-common": "^1.2.2",
"@progress/kendo-angular-dateinputs": "^4.2.1",
"@progress/kendo-angular-dropdowns": "^4.2.4",
"@progress/kendo-angular-excel-export": "^3.1.0",
"@progress/kendo-angular-grid": "^4.6.3",
"@progress/kendo-angular-inputs": "^6.4.1",
"@progress/kendo-angular-intl": "^2.0.1",
"@progress/kendo-angular-l10n": "^2.0.1",
"@progress/kendo-angular-layout": "^4.2.0",
"@progress/kendo-angular-menu": "^2.0.1",
"@progress/kendo-angular-pdf-export": "^2.0.2",
"@progress/kendo-angular-popup": "^3.0.5",
"@progress/kendo-angular-tooltip": "^2.1.2",
"@progress/kendo-angular-treeview": "^4.1.0",
"@progress/kendo-angular-upload": "^5.2.0",
"@progress/kendo-data-query": "^1.5.2",
"@progress/kendo-drawing": "^1.6.0",
"@progress/kendo-theme-default": "4.43.0",
"abp-ng2-module": "^3.2.3",
"abp-web-resources": "^3.8.4",
"angular-oauth2-oidc": "^4.0.2",
"angular-sortablejs": "^2.6.0",
"angular2-counto": "^1.2.5",
"angular2-uuid": "^1.1.1",
"animate.css": "3.6.1",
"autosize": "^4.0.0",
"b64-to-blob": "^1.2.19",
"block-ui": "^2.70.1",
"blueimp-file-upload": "^9.22.0",
"bootstrap": "^4.1.3",
"bootstrap-daterangepicker": "^3.0.3",
"bootstrap-hover-dropdown": "^2.2.1",
"bootstrap-markdown": "^2.10.0",
"bootstrap-maxlength": "^1.6.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "1.13.1",
"bootstrap-switch": "^3.3.4",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"bootstrap4-datetimepicker": "^5.2.3",
"bower": "*",
"chart.js": "^2.6.0",
"chartist": "^0.11.0",
"clone": "^2.1.2",
"codelyzer": "^6.0.0",
"compare-versions": "^3.4.0",
"core-js": "^2.5.7",
"css-star-rating": "^1.2.4",
"css-toggle-switch": "^4.0.3",
"d3": "^5.5.0",
"detect-zoom": "^1.0.2",
"devexpress-dashboard": "^19.2.4",
"devexpress-reporting-angular": "^19.2.4",
"devextreme": "^19.2.4",
"dropzone": "^5.5.1",
"easy-pie-chart": "^2.1.7",
"famfamfam-flags": "^1.0.0",
"flot": "^0.8.0-alpha",
"font-awesome": "^4.7.0",
"gmaps": "^0.4.24",
"inputmask": "^4.0.0",
"ion-rangeslider": "^2.3.1",
"jasmine-spec-reporter": "~5.0.0",
"jquery": "^3.2.1",
"jquery-form": "^4.2.1",
"jquery-migrate": "^3.0.0",
"jquery-mousewheel": "^3.1.13",
"jquery-slimscroll": "^1.3.8",
"jquery-sparkline": "^2.4.0",
"jquery-validation": "^1.15.1",
"jquery.counterup": "^2.1.0",
"jquery.flot.tooltip": "^0.9.0",
"jquery.inputmask": "^3.3.4",
"jquery.uniform": "^4.2.0",
"jqueryui": "^1.11.1",
"jqvmap": "^1.5.1",
"js-cookie": "^2.1.4",
"js-url": "^2.3.0",
"json2": "*",
"jstree": "^3.3.4",
"karma": "^6.4.0",
"localforage": "^1.7.2",
"lodash": "^4.17.4",
"malihu-custom-scrollbar-plugin": "^3.1.5",
"moment": "^2.24.0",
"moment-timezone": "^0.5.21",
"morris.js": "^0.5.0",
"mustache": "^2.3.0",
"ng-recaptcha": "^4.0.0-beta.1",
"ng2-file-upload": "^1.3.0",
"ng2modules-easypiechart": "^0.0.4",
"ng2modules-flot": "^0.0.1",
"ngx-bootstrap": "^9.0.0",
"ngx-device-detector": "^1.4.5",
"ngx-mask": "^6.1.3",
"ngx-webcam": "^0.2.6",
"pace-progress": "^1.0.2",
"popper.js": "^1.12.5",
"primeicons": "1.0.0-beta.10",
"primeng": "6.0.2",
"prismjs": "^1.15.0",
"push.js": "1.0.7",
"quill": "^1.3.7",
"rangeslider.js": "^2.3.1",
"raphael": "^2.2.7",
"rtl-detect": "^1.0.0",
"rxjs": "^6.5.5",
"sass": "^1.54.0",
"select2": "^4.0.5",
"select2-bootstrap-theme": "0.1.0-beta.10",
"simple-line-icons": "^2.4.1",
"socicon": "^3.0.5",
"sortablejs": "^1.7.0",
"spin.js": "^2.3.2",
"summernote": "^0.8.6",
"sweetalert": "^2.0.8",
"tether": "^1.4.0",
"timeago": "^1.6.1",
"toastr": "^2.1.2",
"topojson": "^3.0.2",
"ts-helpers": "^1.1.2",
"ts-node": "~7.0.0",
"tslib": "^2.0.0",
"typeahead.js": "^0.11.1",
"underscore": "^1.9.1",
"urijs": "^1.19.0",
"uuid": "^8.3.2",
"waypoints": "^4.0.1",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~12.2.18",
"@angular/cli": "^12.2.18",
"@angular/compiler-cli": "^12.2.16",
"@angularclass/hmr": "^2.1.3",
"@angularclass/hmr-loader": "^3.0.4",
"@types/bootstrap": "^4.1.2",
"@types/grecaptcha": "^2.0.35",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.2",
"@types/jquery": "^3.3.5",
"@types/jquery.blockui": "0.0.28",
"@types/jstree": "^3.3.34",
"@types/lodash": "^4.14.114",
"@types/moment": "^2.13.0",
"@types/moment-timezone": "^0.5.6",
"@types/morris.js": "^0.5.7",
"@types/node": "^12.11.1",
"@types/tether": "^1.4.4",
"@types/toastr": "^2.1.33",
"codelyzer": "^6.0.0",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"nativescript-dev-webpack": "^0.24.1",
"nswag": "^11.17.21",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "^6.1.3",
"typescript": "4.3.5",
"yarn-upgrade-all": "^0.7.1"
}
}
tsconfig.json
{
"compilerOptions": {
"declaration": false,
"experimentalDecorators": true,
"lib": [ "es2015" , "es6", "dom" ],
"mapRoot": "./",
"module": "esnext",
"skipLibCheck": true,
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es2015",
"typeRoots": [
"../node_modules/@types"
],
"baseUrl": ".",
"paths": {
"@abp/*": [ "../node_modules/abp-ng2-module/dist/src/*" ],
"@app/*": [ "./app/*" ],
"@shared/*": [ "./shared/*" ],
"@node_modules/*": [ "../node_modules/*" ],
"@angular/*": [ "../node_modules/@angular/*" ]
}
},
"files": [
"main.ts",
"polyfills.ts"
],
"include": [
"../src/**/*",
"../node_modules/abp-ng2-module/**/*"
]
}
I`m tried to change angular-sortablejs to ngx-sortablejs , but while change it all modules and many component have a lot of errors
I just delete the
node_modulefolder and runnpm installagain. Its works for me.