错误：模块构建失败 - Angular 迁移到 14.2.2

Question

我已将我的 Angular 项目从 6.0v 升级到 14.2.2v，并在执行ngserve之后后，我面临以下错误。我尝试删除 node_modules 并再次安装，我还尝试安装最新的 @angular-devkit/build-angular 但它不起作用。

我面临的错误

Initial Chunk Files | Names   | Raw Size | Estimated Transfer Size
runtime.js          | runtime |  1.25 kB |               670 bytes

4 unchanged chunks

Build at: 2022-09-16T13:27:09.170Z - Hash: ab7f7874267f0b08 - Time: 18413ms

./src/main.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

./src/polyfills.ts - Error: Module build failed (from ./node_modules/@ngtools/webpack/src/ivy/index.js):
Error: Emit attempted before Angular Webpack plugin initialization.

Error: Failed to initialize Angular compilation - Cannot read property 'fileName' of null

我的 Angular 版本 Angular 版本

我的包..json

 {
  "name": "trump",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "^14.2.2",
    "@angular/animations": "^14.2.2",
    "@angular/common": "^14.2.2",
    "@angular/compiler": "^14.2.2",
    "@angular/core": "^14.2.2",
    "@angular/forms": "^14.2.2",
    "@angular/http": "^7.2.16",
    "@angular/platform-browser": "^14.2.2",
    "@angular/platform-browser-dynamic": "^14.2.2",
    "@angular/platform-server": "^14.2.2",
    "@angular/router": "^14.2.2",
    "@ngtools/webpack": "^14.2.3",
    "@qontu/ngx-inline-editor": "^0.2.0-alpha.12",
    "@types/youtube": "0.0.29",
    "angular-calendar": "^0.22.1",
    "angular-highcharts": "^4.0.5",
    "angular2-busy": "^2.0.4",
    "angular2-datatable-pagination": "git+https://github.com/singhdeepme/angular2-datatable-pagination.git",
    "angular2-froala-wysiwyg": "^2.6.0",
    "angular2-materialize": "^15.1.9",
    "axios": "^0.27.2",
    "chokidar": "^3.5.3",
    "ckeditor4-angular": "^3.1.1",
    "core-js": "^3.25.1",
    "emiya-angular2-fetch": "^1.11.0",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.8",
    "highcharts": "^6.0.2",
    "jquery": "^3.2.1",
    "materialize-css": "^0.100.2",
    "moment": "^2.19.1",
    "mydatepicker": "^2.6.6",
    "mydaterangepicker": "^4.2.1",
    "ng2-dnd": "^4.0.0",
    "ng2-file-upload": "^1.2.1",
    "ng2-tel-input": "^1.0.14",
    "ng2-validation": "^4.2.0",
    "ngx-bootstrap": "^1.9.3",
    "ngx-busy": "^1.0.1",
    "ngx-flash-messages": "^1.0.4",
    "ngx-intl-tel-input": "^3.2.0",
    "ngx-mask": "^2.0.2",
    "ngx-rating": "0.0.9",
    "ngx-select-dropdown": "^0.8.1",
    "ngx-toastr": "^6.3.0",
    "ngx-youtube-player": "^12.0.1",
    "rxjs": "^6.3.3",
    "rxjs-compat": "^6.4.0",
    "socket.io-client": "^2.0.3",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.2.2",
    "@angular/cli": "^14.2.2",
    "@angular/compiler-cli": "^14.2.2",
    "@angular/language-service": "^14.2.2",
    "@types/highcharts": "^5.0.9",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "^5.20.1",
    "typescript": "^4.8.3"
  }
}

Answer 1

您的 Angular 项目是从哪个版本升级的？如果你是例如。在 v12 上，那么您应该先升级到 v13，检查您的应用程序是否正常，然后升级到 v14。

请注意：您不应该直接跳到 v14，因为如果您还使用内部开发的 Angular 库，那么这些问题可能首先需要解决，然后您才能构建主 Angular 应用程序。跳到 v14 确实以你在帖子中所写的方式结束了，所以这就是我提到它的原因。

如果不是这样，请提供您的 package.json 内容。