After upgrading to Angular 12 getting Error: NGCC failed
After upgrading to Angular 12 getting Error: NGCC failed
当我将它升级到 Angular 12 时，我正在研究 Angular 8 项目。因为我完全来自 React 环境，所以没想到会有这么多麻烦，直到我开始。我已经关注 Angular Upgrade guide 已经 2 天了，但不断收到以下错误：
⠋ 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": "./"
}
}
我用 npm outdated 检查过时的软件包并更新了所有软件包。不幸的是，此处发布的大多数答案对我都不起作用，例如将 enableIvy 设置为 true/false 并删除 node_modules/reinstalling 它们。感谢任何额外的帮助或建议。
检查每个依赖项以查找是否有任何库与最新的 Ivy 更改不一致，这可能会导致错误（如 misha130 在评论中建议的那样）。
在我的例子中，该项目没有很多依赖项，因此遍历每个依赖项并卸载每个依赖项直到应用程序正常启动可能很容易。
如果您仍然无法识别罪魁祸首，另一种选择 from a response on Angular's issue tracker 是在本地修改 @angular/compiler-cli 源以记录罪魁祸首。
例如，如果您看到如下错误：
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.
尝试在项目的 node_modules/@angular/compiler-cli 中搜索函数 extractFactoryCallsFromIfStatement 并在该函数中记录源文件。例如，
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());
}
这将记录您可以更新到支持 Angular Ivy 的版本的罪魁祸首包。
我正在使用 Angular 版本 13.2.6，我也有一个“NGCC 失败”的问题，这里提供的大部分答案例如，将 enableIvy 设置为 true/false 并删除 node_modules/reinstalling 他们帮不了我。
我的 NGCC 错误发生在我 运行 命令 npm i --save-dev @types/node 之后，它更新了我的开发环境中的一些包，但也杀死了我的应用程序，可能是库对齐有问题。
Solution:
为了还原 更改，我上网找到了这个 nodejs 页面：
https://nodejs.dev/learn/update-all-the-nodejs-dependencies-to-their-latest-version
下面显示的 npm 命令（来自上面 link）帮助我恢复到我的应用程序的 error-free 版本：
npm update --no-save
在我 运行 这个命令之后，我的应用程序恢复到正常工作状态。
我希望这对某人有所帮助。
当我将它升级到 Angular 12 时，我正在研究 Angular 8 项目。因为我完全来自 React 环境，所以没想到会有这么多麻烦，直到我开始。我已经关注 Angular Upgrade guide 已经 2 天了，但不断收到以下错误：
⠋ 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": "./"
}
}
我用 npm outdated 检查过时的软件包并更新了所有软件包。不幸的是，此处发布的大多数答案对我都不起作用，例如将 enableIvy 设置为 true/false 并删除 node_modules/reinstalling 它们。感谢任何额外的帮助或建议。
检查每个依赖项以查找是否有任何库与最新的 Ivy 更改不一致，这可能会导致错误（如 misha130 在评论中建议的那样）。
在我的例子中，该项目没有很多依赖项，因此遍历每个依赖项并卸载每个依赖项直到应用程序正常启动可能很容易。
如果您仍然无法识别罪魁祸首，另一种选择 from a response on Angular's issue tracker 是在本地修改 @angular/compiler-cli 源以记录罪魁祸首。
例如，如果您看到如下错误：
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.
尝试在项目的 node_modules/@angular/compiler-cli 中搜索函数 extractFactoryCallsFromIfStatement 并在该函数中记录源文件。例如，
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());
}
这将记录您可以更新到支持 Angular Ivy 的版本的罪魁祸首包。
我正在使用 Angular 版本 13.2.6，我也有一个“NGCC 失败”的问题，这里提供的大部分答案例如，将 enableIvy 设置为 true/false 并删除 node_modules/reinstalling 他们帮不了我。
我的 NGCC 错误发生在我 运行 命令 npm i --save-dev @types/node 之后，它更新了我的开发环境中的一些包，但也杀死了我的应用程序，可能是库对齐有问题。
Solution:
为了还原 更改，我上网找到了这个 nodejs 页面： https://nodejs.dev/learn/update-all-the-nodejs-dependencies-to-their-latest-version
下面显示的 npm 命令（来自上面 link）帮助我恢复到我的应用程序的 error-free 版本：
npm update --no-save
在我 运行 这个命令之后，我的应用程序恢复到正常工作状态。 我希望这对某人有所帮助。