Error: Module build failed - Angular migration to 14.2.2

Question

I have upgraded my angular project from 6.0v to 14.2.2v and after doing ng serve I facing the following errors. I tried deleting the node_modules and installing again and I have also tried to install latest @angular-devkit/build-angular but it didnt work.

Errors Erros I'm facing

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

My Angular version Angular version

My package..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

i was trying to add angular universal using

ng add @nguniversal/express-engine

At some point i edited my tsconfig.app.json file and file array in it, that caused the nasty error for me

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": ["src/main.ts", "src/polyfills.ts",],
  "include": ["src/**/*.d.ts"]
}

check your file array in your tsconfig.json file and also check it's path is correct

may be you have to give relative path like below

"files": [
  "../src/main.ts", 
  "../src/polyfills.ts"
],

it took 8 hours for me to figure out , you are not alone here happy coding!