我目前正在将现有的 Angular 项目从版本 11 更新到版本 16。我已成功过渡到版本 15,但在达到版本 16 时遇到了挑战。
我面临的问题是我的大多数模块都遇到以下错误消息:
“此导入包含错误,可能会影响依赖于此 NgModule 的组件。”
我的节点版本: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"
}
}
我渴望学习和理解这个错误背后的潜在原因。有人可以解释一下为什么会发生这种情况吗?我们将非常感谢您的见解和指导。
从 v9 开始,Angular 由 Ivy 编译。当您使用旧版 Angular 编译器(View Engine)创建的库来编译应用程序时,会引发此错误。在 v16 之前,这还不是问题,因为 Angular 使用名为 ngcc 的工具为这些库提供了与 Ivy 的兼容性。
随着 ngcc 在 v16 中被正式删除https://github.com/angular/angular-cli/releases/tag/16.0.0,您要么必须为这些库找到更新的版本(与 Angular 兼容) Ivy)或更换它们。
仔细查看控制台,它可能会给您提供要查看的库。