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"
  }
}

Cochleate

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!

Sartorius

Answer 2

From which version have you upgraded your Angular project? If you were eg. on v12 then you should upgrade first to the v13, check if your app is ok and then upgrade to v14.

As a note: You should not skip straight to v14 because if for example you are also using internally developed Angular libraries then these may have issues that will first need to be resolved before you will be able to build your main Angular app. Skipping to v14 did end up for me in the way you exactly wrote in your post so it's why I'm mentioning it.

If that's not it then please provide your package.json contents.

Nescience

Hello FrontendBuddy! I have upgraded from 6.0v. package.json is added – Cochleate

@YashKawadkar upgrading straight through so many major versions is very risky. I would suggest to revert entire upgrade and then use this page update.angular.io to upgrade version by version so from 6 to 7, from 7 to 8 etc. – Nescience

@YashKawadkar is it fixed? because I'm facing the same but I did upgrade from 9 - 10 - 11 - 12 - 13 - 14 – Intermediate

Answer 3

For me deleting all the "ivy_ngcc_bak" files fixed the problem

Carlist