I'm currently in the process of updating an existing Angular project from version 11 to version 16. I've successfully managed the transition up to version 15, but I've encountered a challenge upon reaching version 16.
The issue I'm facing is that I'm encountering the following error message for most of my modules:
"This import contains errors, which may affect components that depend on this NgModule."
My node version: 16.16.0
package.json
{
"name": "fuse",
"version": "11.0.0",
"license": "https://themeforest.net/licenses/terms/regular",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve",
"start:dev": "node ./node_modules/@angular/cli/bin/ng serve --configuration dev",
"start:dev:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng serve --configuration dev",
"build": "ng build --aot",
"build:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --aot",
"build:prod": "ng build --configuration production --aot",
"build:prod:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration production --aot",
"build:dev:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration dev --aot",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@agm/core": "1.1.0",
"@angular/animations": "16.2.1",
"@angular/cdk": "16.2.0",
"@angular/common": "16.2.1",
"@angular/compiler": "16.2.1",
"@angular/core": "16.2.1",
"@angular/flex-layout": "11.0.0-beta.33",
"@angular/forms": "16.2.1",
"@angular/http": "7.2.16",
"@angular/material": "16.2.0",
"@angular/material-moment-adapter": "16.2.0",
"@angular/platform-browser": "16.2.1",
"@angular/platform-browser-dynamic": "16.2.1",
"@angular/platform-server": "16.2.1",
"@angular/router": "16.2.1",
"@aspnet/signalr": "1.1.4",
"@ngrx/effects": "8.6.0",
"@ngrx/router-store": "8.6.0",
"@ngrx/store": "8.6.0",
"@ngrx/store-devtools": "8.6.0",
"@ngx-share/core": "7.1.2",
"@ngx-translate/core": "13.0.0",
"@ngx-translate/http-loader": "7.0.0",
"@swimlane/dragula": "3.8.0",
"@swimlane/ngx-charts": "16.0.0",
"@swimlane/ngx-datatable": "18.0.0",
"@swimlane/ngx-dnd": "8.2.0",
"@syncfusion/ej2-angular-gantt": "20.1.60",
"@types/prismjs": "1.16.2",
"angular-calendar": "0.28.22",
"angular-in-memory-web-api": "0.11.0",
"angular-responsive-carousel": "2.0.2",
"angular2-text-mask": "9.0.0",
"chart.js": "2.9.4",
"core-js": "3.32.0",
"d3": "5.16.0",
"date-fns": "2.16.1",
"file-saver": "2.0.1",
"karma-coverage-istanbul-reporter": "3.0.3",
"lodash": "4.17.21",
"moment": "2.29.1",
"moment-timezone": "0.5.27",
"ng2-charts": "2.4.2",
"ngrx-store-freeze": "0.2.4",
"ngx-color-picker": "10.1.0",
"ngx-cookie-service": "10.1.1",
"ngx-daterangepicker-material": "2.1.10",
"ngx-papaparse": "5.0.0",
"ngx-quill": "14.3.0",
"ngx-toastr": "15.2.2",
"ngx-ui-tour-core": "6.0.0",
"ngx-ui-tour-md-menu": "6.0.0",
"ngx-vcard": "3.0.24",
"perfect-scrollbar": "1.5.5",
"prismjs": "1.25.0",
"quill": "1.3.7",
"rxjs": "7.8.1",
"rxjs-compat": "6.6.7",
"text-mask-addons": "3.8.0",
"tslib": "2.0.3",
"xlsx": "0.17.4",
"zone.js": "0.13.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "16.2.0",
"@angular/cli": "16.2.0",
"@angular/compiler-cli": "16.2.1",
"@angular/language-service": "16.2.1",
"@types/jasmine": "4.3.5",
"@types/lodash": "4.14.165",
"@types/node": "20.5.0",
"codelyzer": "6.0.1",
"jasmine-core": "3.6.0",
"jasmine-spec-reporter": "5.0.2",
"karma": "6.4.2",
"karma-chrome-launcher": "3.1.0",
"karma-jasmine": "4.0.1",
"karma-jasmine-html-reporter": "1.5.4",
"protractor": "7.0.0",
"ts-node": "8.3.0",
"tslib": "2.0.3",
"tslint": "6.1.3",
"typescript": "5.1.6",
"webpack-bundle-analyzer": "4.1.0"
}
}
I'm eager to learn and understand the potential reasons behind this error. Could someone kindly shed some light on why this might be happening? Your insights and guidance would be greatly appreciated.
