After upgrading to Angular 12 getting Error: NGCC failed

Question

I was working on Angular 8 project when the time came to upgrade it to Angular 12. Since I come exclusively from React environments, didn't think it would be this much of a hassle until I started. It has been 2 days that I have been following Angular Upgrade guide, but keep getting the following error:

⠋ Generating browser application bundles (phase: setup)...TypeError: Cannot read properties of undefined (reading 'text')
    at NodeObject.getText (C:\<project_name>\node_modules\typescript\lib\typescript.js:152697:31)
    at getRequiredModulePath (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:519:99)
    at Object.getImportsOfUmdModule (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\host\umd_host.js:510:23)
    at UmdDependencyHost.extractImports (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\dependencies\umd_dependency_host.js:43:54)
    at UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\dependencies\dependency_host.js:85:32)  
    at UmdDependencyHost.DependencyHostBase.collectDependencies (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\dependencies\dependency_host.js:38:22)
    at DependencyResolver.getEntryPointWithDependencies (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\dependencies\dependency_resolver.js:75:22)
    at EntryPointCollector.walkDirectoryForPackages (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\entry_point_collector.js:47:52)
    at EntryPointCollector.walkDirectoryForPackages (C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\entry_point_collector.js:75:103)
    at C:\<project_name>\node_modules\@angular\compiler-cli\ngcc\src\entry_point_finder\program_based_entry_point_finder.js:124:100
C:\<project_name>\node_modules\@ngtools\webpack\src\ngcc_processor.js:139
            throw new Error(errorMessage + `NGCC failed${errorMessage ? ', see above' : ''}.`);
            ^

Error: NGCC failed.
    at NgccProcessor.process (C:\<project_name>\node_modules\@ngtools\webpack\src\ngcc_processor.js:139:19)
    at <project_name>\node_modules\@ngtools\webpack\src\ivy\plugin.js:129:27
    at Hook.eval [as call] (eval at create (C:\<project_name>\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:20:1)
    at Hook.CALL_DELEGATE [as _call] (C:\<project_name>\node_modules\tapable\lib\Hook.js:14:14)
    at Compiler.newCompilation (C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1043:30)
    at C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1088:29
    at Hook.eval [as callAsync] (eval at create (C:\<project_name>\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\<project_name>\node_modules\tapable\lib\Hook.js:18:14)
    at Compiler.compile (C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:1083:28)
    at C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Watching.js:200:19
    at Hook.eval [as callAsync] (eval at create (C:\<project_name>\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:22:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\<project_name>\node_modules\tapable\lib\Hook.js:18:14)
    at run (C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Watching.js:154:33)
    at C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Watching.js:149:6
    at Compiler.readRecords (C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Compiler.js:920:11)
    at run (C:\<project_name>\node_modules\@angular-devkit\build-angular\node_modules\webpack\lib\Watching.js:145:26)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! <project_name>@0.0.0 start: `ng serve --proxy-config proxy.conf.json`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the <project_name>@0.0.0 start script.

package.json:

{
  "name": "aly",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/core": "12.2.12",
    "@angular-devkit/schematics": "12.2.12",
    "@angular/animations": "^12.2.12",
    "@angular/cdk": "^12.2.12",
    "@angular/common": "^12.2.12",
    "@angular/compiler": "^12.2.12",
    "@angular/core": "^12.2.12",
    "@angular/flex-layout": "^12.0.0-beta.35",
    "@angular/forms": "^12.2.12",
    "@angular/http": "^7.2.16",
    "@angular/material": "^12.2.12",
    "@angular/platform-browser": "^12.2.12",
    "@angular/platform-browser-dynamic": "^12.2.12",
    "@angular/router": "^12.2.12",
    "@auth0/angular-jwt": "^3.0.1",
    "@covalent/core": "2.1.1",
    "@ngx-translate/core": "^11.0.1",
    "@ngx-translate/http-loader": "^4.0.0",
    "@schematics/angular": "^8.3.29",
    "@types/file-saver": "^2.0.3",
    "@types/lodash": "^4.14.176",
    "@types/xml2js": "^0.4.9",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "color-string": "^1.6.0",
    "core-js": "^3.19.1",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "lodash.debounce": "^4.0.8",
    "ng2-dnd": "^5.0.2",
    "ngx-color-picker": "^8.2.0",
    "ngx-text-equality-validator": "^1.0.1",
    "ngx-toastr": "^11.3.3",
    "npm": "^6.14.15",
    "rxjs": "^6.6.7",
    "rxjs-compat": "^6.6.7",
    "stream": "0.0.2",
    "timers": "^0.1.1",
    "tslib": "^2.0.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.12",
    "@angular/cli": "^12.2.12",
    "@angular/compiler-cli": "^12.2.12",
    "@angular/language-service": "^12.2.12",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "^2.0.10",
    "@types/node": "^12.20.36",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.7",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "^8.10.2",
    "tslint": "~6.1.0",
    "typescript": "4.3.5",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "webpack": "^4.46.0"
  }
}

tsconfig.json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "downlevelIteration": true,
    "importHelpers": true,
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ],
    "module": "esnext",
    "baseUrl": "./"
  }
}

I have checked for out-of-date packages with npm outdated and updated all of them. Most of the answers posted here unfortunately did not work for me, such as setting enableIvy to true/false and removing node_modules/reinstalling them. Any additional help or advice is appreciated.

Tillotson

If one of your ng libraries does not support ivy for example it messes up your project. Try upgrading to ng11 or extract until you find the culprit – Poetaster

Thank you, I did that and found a package that was 4 years old and not used. – Tillotson

I have the exact same problem. Did the above suggestion solve your problem? Problem started appearing with Angular 12.2.11. Angular 12.2.10 is working without errors. – Castroprauxel

Yes, the problem disappeared. tried all the proposed answers on SO, but none worked. Bottom line is, you probably have incompatible package with the angular version that is being used. I went through each one and uninstalled it until I found the one which was causing the error. – Tillotson

@Poetaster would you post your answer so I can mark it as accepted? – Tillotson

I haven't got an answer. I have the same problem and I can't fix it because I can't find the exact library out of the 50 I have installed. It just sucks and I hate angular. Post your own answer and I'll upvote it. – Poetaster

I totally did not see your comment - FYI, I don't like it also – Tillotson

Answer 1

Check each dependency to find if any library is not aligned with the latest Ivy changes, which may be causing the error (as misha130 suggested in the comments).

In my case, the project did not have a lot of dependencies, so it may be easy enough to go through each dependency and uninstall each one until the app starts without errors.

---

If you still have trouble identifying the culprit, another option from a response on Angular's issue tracker is to modify the @angular/compiler-cli source locally to log the the culprit.

For example, if you see in error like:

Error: Then-statement inside UMD wrapper is not an expression statement:                                                                          
{                                                                                                                                                 
    var v = factory(require, exports);                                                                                                        
    if (v !== undefined) module.exports = v;                                                                                                  
}                                                                                                                                             
    at extractFactoryCallsFromIfStatement (<YOUR_ANGULAR_REPO>/node_modules/@angular/compiler-cli/ngcc/src/host/umd_host.js:658:23)


An error occurred during the build:
Error: NGCC failed.

Try searching through your project's node_modules/@angular/compiler-cli for the function extractFactoryCallsFromIfStatement and in that function, log the source file. For example,

if (!ts.isExpressionStatement(currentNode.thenStatement)) {
  console.log(currentNode.thenStatement.getSourceFile()); // <-- YOUR LOG STATEMENT
  throw new Error('Then-statement inside UMD wrapper is not an expression statement:\n' +
                    currentNode.thenStatement.getText());
}

which will log the culprit package that you can update to a version that supports Angular Ivy.

Tillotson

Answer 2

I am using Angular version 13.2.6 and I also had an "NGCC failed" issue, and most of the answers provided here such as, setting enableIvy to true/false and removing node_modules/reinstalling them couldn't help me.

My NGCC error occured after I ran the command npm i --save-dev @types/node, which updated some packages in my development environment but also killed my application, probably there was an issue with the alignment of libraries.

Solution:

To revert back the changes, I went online and found this nodejs page: https://nodejs.dev/learn/update-all-the-nodejs-dependencies-to-their-latest-version

The npm command shown below (from the above link) helped me to revert back to an error-free version of my application:

npm update --no-save

After I ran this command, my application was back to it's normal working state. I hope this helps someone.

Anamariaanamnesis

Answer 3

Builds fine after replacing angular-sortablejs with ngx-sortablejs.

Palmy

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Keithakeithley