Reputation: 345
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.
Upvotes: 4
Views: 1340
Reputation: 51
Since v9, Angular is compiled by Ivy. This error throws when you compile your application with libraries that were created with the older Angular compiler - View Engine. Until v16, this has not been an issue because Angular provided compatibility for these libraries to work with Ivy using a tool known as ngcc.
With ngcc is officially being removed in v16 https://github.com/angular/angular-cli/releases/tag/16.0.0, you'll either have to find a newer version for these libraries (compatible with Angular Ivy) or replace them.
Closely look at the console, it'll probably give you the libraries to look at.
Upvotes: 0