Module Parse Failed With Optional-Chaining in Angular 10 and ES2020

Question

Just updated to Angular 10 from 9.0

Every use of Optional Chaining (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-7.html#optional-chaining) in my code now results in its own instance of the following error

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;
|     }

I confirm that this error ONLY occurs when targeting es2020 as per below from my tsconfig.base.json file, but is fine when targeting es2019

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

I confirm this error occurs in fresh Angular 10 application when newly generated as below, and then change target to es2020 (so it is not my code!) Typescript version is 3.9.7

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

I also note that in the release notes of es2020 that 'Optional Chaining' is now a new feature. This makes me suspicious that Typescript compilation of 'Optional Chaining' somehow is not marrying up with the new es2020 feature?

How do I use Optional-Chaining in es2020?

Answer 1

Using Optional-Chaining in Angular 10 while targeting es2020 will result in the error 'Module parse failed: Unexpected token'

Current Workaround is to target es2019