Angular 12升级至17后ng start报错：无法解析i7.IconsModule

我们近期将项目从Angular 12升级至Angular 17，执行构建或运行命令时持续出现以下报错：

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i7.IconsModule to symbol
./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Cannot resolve type entity i7.IconsModule to symbol

代码中从未使用过IconsModule，已尝试在tsconfig.lib.json中添加"preserveSymlinks": true、删除node_modules并清理npm缓存，但均无效，寻求解决方案。

附package.json依赖列表：

{
  "dependencies": {
    "@angular/animations": "^17.3.1",
    "@angular/cdk": "^17.3.2",
    "@angular/common": "^17.3.2",
    "@angular/compiler": "^17.3.1",
    "@angular/core": "^17.3.1",
    "@angular/elements": "^17.3.1",
    "@angular/forms": "^17.3.1",
    "@angular/localize": "^17.3.1",
    "@angular/material": "^17.3.2",
    "@angular/material-moment-adapter": "^17.3.2",
    "@angular/platform-browser": "^17.3.1",
    "@angular/platform-browser-dynamic": "^17.3.1",
    "@angular/router": "^17.3.1",
    "@apollo/client": "3.6.9",
    "@azure/msal-angular": "^3.0.13",
    "@azure/msal-browser": "^3.10.0",
    "@fullcalendar/angular": "6.1.10",
    "@fullcalendar/core": "6.1.10",
    "@fullcalendar/daygrid": "6.1.10",
    "@fullcalendar/interaction": "6.1.10",
    "@microsoft/applicationinsights-web": "^3.1.2",
    "@microsoft/microsoft-graph-client": "^3.0.5",
    "@ng-bootstrap/ng-bootstrap": "^16.0.0",
    "@progress/kendo-angular-buttons": "^15.3.0",
    "@progress/kendo-angular-charts": "^15.3.0",
    "@progress/kendo-angular-common": "^15.3.0",
    "@progress/kendo-angular-dateinputs": "^15.3.0",
    "@progress/kendo-angular-dialog": "^15.3.0",
    "@progress/kendo-angular-dropdowns": "^15.3.0",
    "@progress/kendo-angular-excel-export": "^15.3.0",
    "@progress/kendo-angular-grid": "^15.3.0",
    "@progress/kendo-angular-inputs": "^15.3.0",
    "@progress/kendo-angular-intl": "^15.3.0",
    "@progress/kendo-angular-l10n": "^15.3.0",
    "@progress/kendo-angular-label": "^15.3.0",
    "@progress/kendo-angular-layout": "^15.3.0",
    "@progress/kendo-angular-navigation": "^15.5.0",
    "@progress/kendo-angular-pager": "^15.3.0",
    "@progress/kendo-angular-pdf-export": "^15.3.0",
    "@progress/kendo-angular-popup": "^15.3.0",
    "@progress/kendo-angular-progressbar": "^15.3.0",
    "@progress/kendo-angular-tooltip": "^15.3.0",
    "@progress/kendo-angular-treeview": "^15.3.0",
    "@progress/kendo-angular-upload": "^15.3.0",
    "@progress/kendo-angular-utils": "^15.5.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-drawing": "^1.19.1",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-theme-default": "~7.2.1",
    "@types/minimatch": "^5.1.2",
    "@types/moment": "^2.13.0",
    "@types/moment-timezone": "^0.5.30",
    "@types/regenerator-runtime": "^0.13.1",
    "@webcomponents/custom-elements": "~1.6.0",
    "angular-d3-charts": "^5.0.0",
    "angular-pipes": "^10.0.0",
    "angular-user-idle": "4.0.0",
    "angular2-uuid": "^1.1.1",
    "apollo-angular": "^6.0.0",
    "bootstrap": "^4.6.2",
    "core-js": "2.6.5",
    "crypto-js": "^4.1.1",
    "document-register-element": "~1.7.2",
    "file-saver": "^2.0.5",
    "font-awesome": "~4.7.0",
    "graphql": "^16.0.0",
    "hammerjs": "^2.0.8",
    "jquery": "^3.6.1",
    "json5": "^2.2.2",
    "jsonwebtoken": "^9.0.0",
    "jszip": "^3.10.1",
    "jszip-utils": "^0.1.0",
    "moment": "^2.29.4",
    "moment-timezone": "^0.5.39",
    "ng-multiselect-dropdown": "^0.2.14",
    "ngx-cookie-service": "^17.1.0",
    "ngx-file-drop": "^16.0.0",
    "ngx-order-pipe": "^2.2.0",
    "ngx-toastr": "^18.0.0",
    "pdfmake": "^0.2.2",
    "powerbi-client": "^2.21.0",
    "powerbi-client-angular": "^3.0.5",
    "rxjs": "7.8.1",
    "rxjs-compat": "~6.6.7",
    "semver": "^7.5.2",
    "stream": "0.0.2",
    "sweetalert2": "~8.11.7",
    "tslib": "^2.4.1",
    "xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz",
    "zone.js": "^0.14.4"
  }
}

解决方案尝试 #

• 更新第三方依赖到Angular 17兼容版本：当前使用的Kendo Angular组件为15.x版本，需升级到适配Angular 17的16+版本；同时检查其他老旧依赖（如angular-pipes、angular-user-idle）是否有Angular 17兼容版本，或替换为替代方案。
• 清理构建缓存：删除项目根目录下的.angular、dist文件夹及tsconfig.tsbuildinfo文件，再重新执行构建命令。
• 调整TypeScript编译配置：在tsconfig.json的compilerOptions中添加：

  "skipLibCheck": true,
  "preserveSymlinks": true
  

  skipLibCheck可跳过第三方库的类型检查，规避库自身类型定义不兼容的问题。
• 排查polyfills.ts间接引用：注释掉polyfills.ts中非必要的导入，逐步构建排查是否有第三方库通过polyfills间接引入IconsModule。
• 严格锁定依赖版本：使用npm ci命令重新安装依赖，确保所有依赖完全匹配锁文件中的版本，避免版本不一致导致的冲突。
• 检查Angular CLI构建配置：确认angular.json中使用Angular 17默认的@angular-devkit/build-angular:application构建器，移除旧版browser构建器的残留配置。

内容的提问来源于stack exchange，提问作者Srijit Das