Angular 16升级至17.3.8后编译报错：无法解析MatLegacyDialogModule

问题详情 #

我正在将Angular从16版本升级至17.3.8版本，编译后出现以下错误：

Error: Cannot Resolve type entity i10.MatLegacyDialogModule to symbol angular 17.3

Node版本：v18.14.1

package.json配置 #

{
  "name": "project_name",
  "version": "2.13.34",
  "license": "https://themeforest.net/licenses/standard",
  "scripts": {
    "ng": "ng",
    "start": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng serve --open",
    "start:mem": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng serve --open",
    "analyze:mem": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng run project_name:analyze --gzip",
    "build": "ng build && npm run move-static",
    "build:test": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build",
    "build:prod": "ng build --configuration production",
    "build:prod:mem": "node --max_old_space_size=6144 ./node_modules/@angular/cli/bin/ng build --configuration production",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "bundle:report": "source-map-explorer dist/project_name/browser/*.js",
    "dev:ssr:mem": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng run project_name:serve-ssr",
    "dev:ssr": "ng run project_name:serve-ssr",
    "analyze:build": "ng build --configuration production --source-map true",
    "serve:ssr": "node --max_old_space_size=4096 dist/project_name/server/main.js",
    "pm2": "pm2 start dist/project_name/server/main.js",
    "build:ssr": "ng build && ng run project_name:server",
    "build:prod:ssr": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng build --configuration production && ng run project_name:server",
    "build:prod:ssr:mem": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng build --configuration production && ng run project_name:server",
    "build:ssr:mem": "node --max_old_space_size=8081 ./node_modules/@angular/cli/bin/ng build && ./node_modules/@angular/cli/bin/ng run project_name:server",
    "prerender": "ng run project_name:prerender",
    "compodoc:build": "compodoc -p tsconfig.doc.json",
    "compodoc:build-and-serve": "compodoc -p tsconfig.doc.json -s",
    "compodoc:serve": "compodoc -s",
    "move-static": "cp -a ./node_modules/@pdftron/webviewer/public/. ./dist/public/webviewer"
  },
  "private": true,
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "resolutions": {
    "webpack": "^5.0.0-beta.30"
  },
  "dependencies": {
    "@angular-builders/custom-webpack": "^13.1.0",
    "@angular-material-components/datetime-picker": "^9.0.0",
    "@angular/animations": "^17.3.12",
    "@angular/cdk": "^17.3.10",
    "@angular/common": "17.3.12",
    "@angular/compiler": "17.3.12",
    "@angular/core": "17.3.12",
    "@angular/fire": "^7.2.1",
    "@angular/forms": "17.3.12",
    "@angular/material": "^17.3.10",
    "@angular/material-moment-adapter": "17.3.10",
    "@angular/platform-browser": "17.3.12",
    "@angular/platform-browser-dynamic": "17.3.12",
    "@angular/platform-server": "17.3.12",
    "@angular/router": "17.3.12",
    "@angular/ssr": "^17.3.8",
    "@aws-sdk/client-s3": "^3.582.0",
    "@aws-sdk/lib-storage": "^3.409.0",
    "@aws-sdk/s3-request-presigner": "^3.272.0",
    "@aws-sdk/signature-v4-crt": "^3.408.0",
    "@aws-sdk/util-user-agent-node": "^3.408.0",
    "@calumk/editorjs-columns": "^0.3.2",
    "@compodoc/compodoc": "^1.1.19",
    "@editorjs/attaches": "^1.3.0",
    "@editorjs/checklist": "^1.6.0",
    "@editorjs/code": "^2.9.0",
    "@editorjs/editorjs": "^2.29.1",
    "@editorjs/embed": "^2.7.0",
    "@editorjs/header": "^2.8.1",
    "@editorjs/image": "^2.9.0",
    "@editorjs/link": "^2.6.2",
    "@editorjs/list": "^1.9.0",
    "@editorjs/paragraph": "^2.11.4",
    "@editorjs/quote": "^2.6.0",
    "@editorjs/raw": "^2.5.0",
    "@editorjs/table": "^2.3.0",
    "@editorjs/underline": "^1.1.0",
    "@editorjs/warning": "^1.4.0",
    "@formio/angular": "^6.0.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fullcalendar/angular": "^6.1.8",
    "@fullcalendar/core": "^6.1.8",
    "@fullcalendar/daygrid": "^6.1.8",
    "@fullcalendar/interaction": "^6.1.8",
    "@fullcalendar/list": "^6.1.8",
    "@fullcalendar/moment": "^6.1.8",
    "@fullcalendar/rrule": "^6.1.8",
    "@fullcalendar/timegrid": "^6.1.8",
    "@nguniversal/module-map-ngfactory-loader": "^8.2.6",
    "@pdftron/webviewer": "^8.0.0",
    "@types/jspdf": "^1.3.3",
    "@types/stripe": "^7.13.25",
    "algoliasearch": "^4.12.1",
    "angular-instantsearch": "^4.4.1",
    "angular-sanitize": "^1.8.3",
    "aos": "^2.3.4",
    "apexcharts": "^3.26.1",
    "archiver": "^5.3.1",
    "bootstrap": "^5.1.3",
    "crypto-browserify": "^3.12.0",
    "crypto-es": "^1.2.7",
    "crypto-js": "^4.0.0",
    "domino": "^2.1.6",
    "domino-ext": "^2.1.4",
    "dotenv": "^16.0.1",
    "editorjs-alert": "^1.1.3",
    "editorjs-html": "^3.4.3",
    "editorjs-style": "^3.0.3",
    "editorjs-text-color-plugin": "^2.0.4",
    "editorjs-toggle-block": "^0.3.15",
    "express": "^4.15.2",
    "firebase": "^9.23.0",
    "fs-extra": "^11.2.0",
    "gapi-script": "^1.2.0",
    "highlight.js": "10.7.2",
    "html2pdf.js": "^0.10.1",
    "i": "^0.3.7",
    "instantsearch.js": "^4.54.1",
    "jspdf": "^2.5.1",
    "jspdf-autotable": "^3.5.23",
    "leader-line": "^1.0.7",
    "lodash-es": "4.17.21",
    "material-steppers": "^2.0.0",
    "moment": "^2.29.1",
    "ng-apexcharts": "^1.7.4",
    "ng-quill": "^4.5.3",
    "ng-starrating": "^1.0.20",
    "ng-stripe-checkout": "^1.0.4",
    "ngx-device-detector": "^2.0.8",
    "ngx-mat-select-search": "^7.0.0",
    "node-fetch": "^2.6.1",
    "npm": "^10.1.0",
    "perfect-scrollbar": "1.5.0",
    "pm2": "^5.2.2",
    "quill": "1.3.7",
    "quill-emoji": "^0.2.0",
    "request": "^2.88.2",
    "rrule": "2.6.8",
    "rxjs": "^7.5.5",
    "rxjs-compat": "^6.6.7",
    "source-map-explorer": "^2.5.2",
    "split-file": "^2.3.0",
    "stripe": "^8.116.0",
    "stripe-angular": "^1.9.3",
    "sweetalert2": "^11.4.24",
    "title-editorjs": "^1.0.2",
    "ts-md5": "^1.3.1",
    "tslib": "2.2.0",
    "video.js": "^7.21.4",
    "videojs-logo": "^2.1.6",
    "videojs-markers": "^1.0.1",
    "videojs-playlist": "^5.1.0",
    "videojs-seek-buttons": "^3.0.1",
    "vis": "^4.21.0-EOL",
    "vis-data": "^7.1.9",
    "vis-network": "^9.1.9",
    "vjs": "^0.1.8",
    "web-animations-js": "2.3.2",
    "xlsx": "^0.18.5",
    "zone.js": "~0.14.10"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "17.3.8",
    "@angular/cli": "17.3.8",
    "@angular/compiler-cli": "17.3.12",
    "@angular/language-service": "17.3.12",
    "@formio/js": "^5.0.0-rc.48",
    "@ngx-builders/analyze": "^2.3.0",
    "@ngx-meta/core": "^9.0.0",
    "@types/crypto-js": "4.0.1",
    "@types/express": "^4.17.0",
    "@types/highlight.js": "9.12.4",
    "@types/jasmine": "3.6.10",
    "@types/jasminewd2": "2.0.8",
    "@types/lodash-es": "4.17.4",
    "@types/node": "15.0.1",
    "browser-sync": "^3.0.0",
    "bufferutil": "^4.0.3",
    "codelyzer": "6.0.2",
    "file-saver": "^2.0.5",
    "formiojs": "^4.18.2",
    "jasmine-core": "3.7.1",
    "jasmine-spec-reporter": "7.0.0",
    "karma": "6.3.2",
    "karma-chrome-launcher": "3.1.0",
    "karma-coverage-istanbul-reporter": "3.0.3",
    "karma-jasmine": "4.0.1",
    "karma-jasmine-html-reporter": "1.5.4",
    "ngx-infinite-scroll": "^16.0.0",
    "ngx-moment": "^6.0.2",
    "ngx-owl-carousel-o": "^16.0.0",
    "ngx-pagination": "^6.0.3",
    "ngx-quill": "^22.0.0",
    "protractor": "7.0.0",
    "tailwindcss": "2.1.2",
    "ts-node": "9.1.1",
    "tslint": "6.1.2",
    "typescript": "5.3.3",
    "utf-8-validate": "^5.0.5",
    "ws": "^8.2.2",
    "xhr2": "^0.2.1"
  }
}

解决方案 #

核心问题修复：替换旧版Dialog模块 #

Angular Material 17已彻底移除MatLegacyDialogModule这类旧版模块，需统一替换为新版模块：

• 全局搜索项目中所有import { MatLegacyDialogModule } from '@angular/material/dialog';，替换为import { MatDialogModule } from '@angular/material/dialog';
• 组件中注入的MatLegacyDialog服务，替换为MatDialog，调用方法（如open()）完全一致，无需修改业务逻辑
• 若使用了MatLegacyDialogConfig，替换为MatDialogConfig

依赖兼容性修复 #

你的package.json中存在多个老旧依赖，与Angular 17不兼容，需同步升级：

• @angular-material-components/datetime-picker：从9.0.0升级到^17.x.x版本
• @angular-builders/custom-webpack：从13.1.0升级到^17.x.x版本
• 移除@nguniversal/module-map-ngfactory-loader（8.2.6），Angular 17已使用@angular/ssr，该依赖已废弃

最终执行步骤 #

1. 执行npm install更新依赖
2. 清理缓存：npm cache clean --force
3. 重新编译项目：ng build

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