Issue
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.
Solution
As misha130 suggested in the comments, there was (a single) library not aligned with the latest Ivy changes which was causing the error. I was fortunate enough to not have a lot of dependencies in the project, so I went through each one and uninstalled it until the app started without errors.
Answered By - borgmater
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.