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

Mohammed · Accepted Answer · 2022-12-31 13:18:20Z

3

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!

edited Dec 31, 2022 at 13:18

answered Dec 31, 2022 at 13:11

Mohammed

1,0489 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

FrontendBuddy · Accepted Answer · 2022-09-19 12:06:12Z

0

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.

edited Sep 19, 2022 at 12:06

answered Sep 19, 2022 at 11:22

FrontendBuddy

92 bronze badges

3 Comments

Yash Kawadkar Over a year ago

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

FrontendBuddy Over a year ago

@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.

Gopalakrishnan Over a year ago

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

Mike · Accepted Answer · 2022-12-20 12:40:16Z

0

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

answered Dec 20, 2022 at 12:40

Mike

8291 gold badge16 silver badges41 bronze badges

Collectives™ on Stack Overflow

Error: Module build failed - Angular migration to 14.2.2

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related