Angular 10 和 ES2020 中的可选链接模块解析失败答案

【问题标题】：Module Parse Failed With Optional-Chaining in Angular 10 and ES2020Angular 10 和 ES2020 中的可选链接模块解析失败
【发布时间】：2020-11-13 19:46:40
【问题描述】：

刚刚从 9.0 更新到 Angular 10

现在在我的代码中每次使用可选链 (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) 都会导致它自己的以下错误实例

ERROR in ./src/app/app.component.ts 39:18
Module parse failed: Unexpected token (39:18)
File was processed with these loaders:
 * ./node_modules/@ngtools/webpack/src/index.js
You may need an additional loader to handle the result of these loaders.
|         this.title = 'my-app';
|         const x = this.GetObject();
>         let y = x?.myvar;
|     }

我确认此错误仅在我的 tsconfig.base.json 文件中按照以下针对 es2020 时发生，但在针对 es2019 时很好

"target": "es2020",  //If set to es2019 then all OK
"module": "es2020",
"lib": [
   "es2018",  //Error also occurs if this set to es2020
    "dom"
  ],

我确认这个错误发生在新生成的新Angular 10应用程序中，如下所示，然后将目标更改为es2020（所以它不是我的代码！）打字稿版本是3.9.7

npm install -g @angular/cli
ng new my-app

我还注意到，在 es2020 的发行说明中，“可选链接”现在是一项新功能。这让我怀疑“可选链接”的 Typescript 编译不知何故没有与新的 es2020 功能结合？

如何在 es2020 中使用 Optional-Chaining？

【问题讨论】：

发生这种情况因为 TypeScript 行为正确，因为选项链在 ES2020 中是原生的，编译器不会对其进行转换。 @ngtools/wepack 随后正在解析代码并且不理解操作符。通过运行npm ls typescript 确保您没有安装多个版本的 TypeScript
感谢 Aluan，我应该向 TypeScript 开发团队提出这个问题吗？如果是这样，你知道我会在哪里这样做吗？
不，我要解释的是这不是 TypeScript 问题。这是另一个不理解新语法的工具，显然是@ngtools/webpack。将 target 设置为 ES2020，意味着 ?. 不会被转换，因为它是 ECMAScript 2020 的一部分。如果你降低 Target，那么它会转换不是该格式原生的语法，将其重写为另一种语法形式
那么问题来了，你如何将 Angular 与 ES2020 结合使用，以及可选链，尤其是当你需要其他 2020 功能时？有什么方法可以告诉 Typescript 重写可选链，同时保留您需要的其他功能？

标签： typescript optional-chaining angular10 ecmascript-2020

【解决方案1】：

在面向 es2020 的 Angular 10 中使用 Optional-Chaining 将导致错误“模块解析失败：意外令牌”

当前的解决方法是针对 es2019

【讨论】：

如果您需要 2020 年的功能怎么办？