for await is not supported when targeting es2018

[JounQin]

Bug Report

Affected Package

The issue is caused by package @angular-devkit/build-angular

Is this a regression?

No

Description

As title

Minimal Reproduction

https://github.com/JounQin/test/blob/angular/src/main.ts#L19

Exception or Error

./src/main.ts:18:8 - Error: Module parse failed: Unexpected token (18:8)
File was processed with these loaders:
 * ./node_modules/@angular-devkit/build-angular/src/babel/webpack-loader.js
 * ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
 * ./node_modules/@ngtools/webpack/src/ivy/index.js
You may need an additional loader to handle the result of these loaders.
|     console.log(result);
| 
>     for await (const i of [1, 2, 3]) {
|       console.log(i);
|     }

Your Environment

Angular Version:

Angular CLI: 12.0.5
Node: 12.22.1
Package Manager: yarn 1.22.10
OS: darwin x64

Angular: 12.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1200.5
@angular-devkit/build-angular   12.0.5
@angular-devkit/core            12.0.5
@angular-devkit/schematics      12.0.5
@schematics/angular             12.0.5
rxjs                            7.1.0

Anything else relevant?

[alan-agius4]

Hi,

It appears that this issue is caused by Babel when using the @babel/plugin-transform-async-to-generator plugin.

Here's a REPL https://babeljs.io/repl/#?browsers=latest%20chrome%20version&build=&builtIns=false&corejs=3.6&spec=false&loose=false&code_lz=BQQwzgngdgxgBMAlHAvAPjgbwFBzjAeyjABc4DU4QB3EASzIAUAnAgWzrAFMA6ZrsAQA2ANy7AAjIgDcufEUFDeQggHNgBGXIBmBZlVoMEhYmQoFtcANoSANHABM9gMwBdZCcXK1GrQF9EJFkgA&debug=false&forceAllTransforms=true&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=unambiguous&lineWrap=false&presets=&prettier=false&targets=&version=7.14.7&externalPlugins=%40babel%2Fplugin-transform-async-to-generator%407.14.5

Let's continue tracking this over here babel/babel#13509.

[JounQin]

@alan-agius4

Browsers support es2018 will support for await, is that possible to not use babel transformer? And webpack 5 supports for await natively.

[alan-agius4]

await / async need to be downlevelled because there is no easy way to intercept native promises.

See angular/angular#31730 for more context about this.

[alan-agius4]

Turns out we need to add an additional Babel plugin.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}