升级到Angular 12后出现错误：NGCC失败。

Question

我正在进行 Angular 8 项目的工作，现在需要升级到 Angular 12。由于我一直都是从 React 的环境中来的，没想到这个升级会如此麻烦，直到我开始操作才发现。我已经花了两天时间进行 Angular 升级指南 的跟进，但仍然遇到以下错误：

⠋ 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/重新安装它们。如果有任何其他帮助或建议，我将不胜感激。

- borgmater

---

如果你的ng库不支持ivy，例如它会破坏你的项目。尝试升级到ng11或提取库直到找到罪魁祸首。 - misha130

谢谢，我已经这样做了，并找到了一个四年前就不再使用的软件包。 - borgmater

我有完全相同的问题。上面的建议解决了你的问题吗？问题始于 Angular 12.2.11 版本。Angular 12.2.10 可以正常工作，没有错误。 - hullunist

@misha130，你能发表你的答案吗？这样我就可以将其标记为已接受的答案了。 - borgmater

我还没有得到答案。我有同样的问题，因为我无法找到我已经安装了50个库中的确切库，所以我无法解决它。这太糟糕了，我讨厌 Angular。请发表您自己的答案，我会点赞的。 - misha130

Answer 1

检查每个依赖项，查找是否有任何库与最新的Ivy更改不一致，这可能是导致错误的原因（正如misha130在评论中建议的那样）。

在我的情况下，项目没有很多依赖项，所以可以轻松地逐个检查每个依赖项并卸载每个依赖项，直到应用程序无错误启动。

---

如果您仍然无法确定罪犯，另一个选项来自Angular问题跟踪器上的回复是在本地修改@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 的版本。

- borgmater

Answer 2

我正在使用 Angular 版本 13.2.6，也遇到了“NGCC 失败”的问题，这里提供的大多数答案，如将 enableIvy 设置为 true/false 和删除 node_modules/重新安装它们等都无法帮助我。

我的 NGCC 错误是在运行命令 npm i --save-dev @types/node 后发生的，这更新了开发环境中的一些软件包，但也破坏了我的应用程序，可能是库对齐存在问题。

解决方案:

为了恢复更改，我上网找到了这个 nodejs 页面： https://nodejs.dev/learn/update-all-the-nodejs-dependencies-to-their-latest-version

上面链接中显示的 npm 命令帮助我恢复到一个无错误版本的应用程序：

npm update --no-save

运行此命令后，我的应用程序恢复到正常工作状态。 希望这能帮助到某些人。

- Khayelihle Ngcobo