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