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

Question

当我将 Angular 8 项目升级到 Angular 12 时，我正在研究 Angular 8 项目。由于我完全来自 React 环境，所以在开始之前我并没有想到会这么麻烦。我已经关注Angular 升级指南2 天了，但不断收到以下错误：

\n

\xe2\xa0\x8b Generating browser application bundles (phase: setup)...TypeError: Cannot read properties of undefined (reading \'text\')\n    at NodeObject.getText (C:\\<project_name>\\node_modules\\typescript\\lib\\typescript.js:152697:31)\n    at getRequiredModulePath (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\host\\umd_host.js:519:99)\n    at Object.getImportsOfUmdModule (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\host\\umd_host.js:510:23)\n    at UmdDependencyHost.extractImports (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\umd_dependency_host.js:43:54)\n    at UmdDependencyHost.DependencyHostBase.recursivelyCollectDependencies (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\dependency_host.js:85:32)  \n    at UmdDependencyHost.DependencyHostBase.collectDependencies (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\dependency_host.js:38:22)\n    at DependencyResolver.getEntryPointWithDependencies (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\dependencies\\dependency_resolver.js:75:22)\n    at EntryPointCollector.walkDirectoryForPackages (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\entry_point_finder\\entry_point_collector.js:47:52)\n    at EntryPointCollector.walkDirectoryForPackages (C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\entry_point_finder\\entry_point_collector.js:75:103)\n    at C:\\<project_name>\\node_modules\\@angular\\compiler-cli\\ngcc\\src\\entry_point_finder\\program_based_entry_point_finder.js:124:100\nC:\\<project_name>\\node_modules\\@ngtools\\webpack\\src\\ngcc_processor.js:139\n            throw new Error(errorMessage + `NGCC failed${errorMessage ? \', see above\' : \'\'}.`);\n            ^\n\nError: NGCC failed.\n    at NgccProcessor.process (C:\\<project_name>\\node_modules\\@ngtools\\webpack\\src\\ngcc_processor.js:139:19)\n    at <project_name>\\node_modules\\@ngtools\\webpack\\src\\ivy\\plugin.js:129:27\n    at Hook.eval [as call] (eval at create (C:\\<project_name>\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:20:1)\n    at Hook.CALL_DELEGATE [as _call] (C:\\<project_name>\\node_modules\\tapable\\lib\\Hook.js:14:14)\n    at Compiler.newCompilation (C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Compiler.js:1043:30)\n    at C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Compiler.js:1088:29\n    at Hook.eval [as callAsync] (eval at create (C:\\<project_name>\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:22:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\<project_name>\\node_modules\\tapable\\lib\\Hook.js:18:14)\n    at Compiler.compile (C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Compiler.js:1083:28)\n    at C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Watching.js:200:19\n    at Hook.eval [as callAsync] (eval at create (C:\\<project_name>\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:22:1)\n    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\\<project_name>\\node_modules\\tapable\\lib\\Hook.js:18:14)\n    at run (C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Watching.js:154:33)\n    at C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Watching.js:149:6\n    at Compiler.readRecords (C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Compiler.js:920:11)\n    at run (C:\\<project_name>\\node_modules\\@angular-devkit\\build-angular\\node_modules\\webpack\\lib\\Watching.js:145:26)\nnpm ERR! code ELIFECYCLE\nnpm ERR! errno 1\nnpm ERR! <project_name>@0.0.0 start: `ng serve --proxy-config proxy.conf.json`\nnpm ERR! Exit status 1\nnpm ERR!\nnpm ERR! Failed at the <project_name>@0.0.0 start script.\n

\n

包.json：

\n

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

\n

tsconfig.json：

\n

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

\n

我已检查过时的软件包并npm outdated更新了所有软件包。不幸的是，这里发布的大多数答案对我来说不起作用，例如设置enableIvy为 true/false 和删除 node_modules/重新安装它们。如有任何额外的帮助或建议，我们将不胜感激。

\n

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 的版本。