将 Angular 项目从版本 11 升级到 16 - NgModule 中导入错误

问题描述 投票:0回答:1

我目前正在将现有的 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"
  }
}

我渴望学习和理解这个错误背后的潜在原因。有人可以解释一下为什么会发生这种情况吗?我们将非常感谢您的见解和指导。

angular typescript angular-cli angular-module angular-upgrade
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)或更换它们。

仔细查看控制台,它可能会给您提供要查看的库。

© www.soinside.com 2019 - 2024. All rights reserved.