fix(@angular-devkit/build-angular): downlevel for await...of when targetting ES2018+

Closes #21196

(cherry picked from commit 367de35)

Author: alan-agius4

package.json

@@ -84,6 +84,7 @@
     "@babel/core": "7.14.6",
     "@babel/generator": "7.14.5",
     "@babel/helper-annotate-as-pure": "7.14.5",
+    "@babel/plugin-proposal-async-generator-functions": "7.14.7",
     "@babel/plugin-transform-runtime": "7.14.5",
     "@babel/preset-env": "7.14.7",
     "@babel/runtime": "7.14.6",

packages/angular_devkit/build_angular/package.json

@@ -13,6 +13,7 @@
     "@babel/core": "7.14.6",
     "@babel/generator": "7.14.5",
     "@babel/helper-annotate-as-pure": "7.14.5",
+    "@babel/plugin-proposal-async-generator-functions": "7.14.7",
     "@babel/plugin-transform-async-to-generator": "7.14.5",
     "@babel/plugin-transform-runtime": "7.14.5",
     "@babel/preset-env": "7.14.7",

packages/angular_devkit/build_angular/src/babel/presets/application.ts

@@ -181,7 +181,10 @@ export default function (api: unknown, options: ApplicationPresetOptions) {
 
   if (options.forceAsyncTransformation) {
     // Always transform async/await to support Zone.js
-    plugins.push(require('@babel/plugin-transform-async-to-generator').default);
+    plugins.push(
+      require('@babel/plugin-transform-async-to-generator').default,
+      require('@babel/plugin-proposal-async-generator-functions').default,
+    );
     needRuntimeTransform = true;
   }
 

packages/angular_devkit/build_angular/src/browser/tests/behavior/typescript-target_spec.ts

@@ -43,15 +43,9 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
         vendorChunk: true,
       });
 
-      const { result, logs } = await harness.executeOnce();
+      const { result } = await harness.executeOnce();
 
       expect(result?.success).toBe(true);
-      expect(logs).not.toContain(
-        jasmine.objectContaining({
-          message: jasmine.stringMatching('Zone.js does not support native async/await in ES2017+'),
-        }),
-      );
-
       harness.expectFile('dist/main.js').content.not.toMatch(/\sasync\s/);
       harness.expectFile('dist/main.js').content.toContain('"from-async-app-function"');
       harness.expectFile('dist/main.js').content.toContain('"from-async-js-function"');
@@ -125,17 +119,46 @@ describeBuilder(buildWebpackBrowser, BROWSER_BUILDER_INFO, (harness) => {
         vendorChunk: true,
       });
 
-      const { result, logs } = await harness.executeOnce();
+      const { result } = await harness.executeOnce();
 
       expect(result?.success).toBe(true);
-      expect(logs).not.toContain(
-        jasmine.objectContaining({
-          message: jasmine.stringMatching('Zone.js does not support native async/await in ES2017+'),
-        }),
-      );
-
       harness.expectFile('dist/main.js').content.not.toMatch(/\sasync\s/);
       harness.expectFile('dist/main.js').content.toContain('"from-async-function"');
     });
+
+    it('downlevels "for await...of" when targetting ES2018+', async () => {
+      await harness.modifyFile('src/tsconfig.app.json', (content) => {
+        const tsconfig = JSON.parse(content);
+        if (!tsconfig.compilerOptions) {
+          tsconfig.compilerOptions = {};
+        }
+        tsconfig.compilerOptions.target = 'es2020';
+
+        return JSON.stringify(tsconfig);
+      });
+
+      // Add an async function to the project
+      await harness.writeFile(
+        'src/main.ts',
+        `
+        (async () => {
+          for await (const o of [1, 2, 3]) {
+            console.log("for await...of");
+          }
+        })();
+        `,
+      );
+
+      harness.useTarget('build', {
+        ...BASE_OPTIONS,
+        vendorChunk: true,
+      });
+
+      const { result } = await harness.executeOnce();
+
+      expect(result?.success).toBe(true);
+      harness.expectFile('dist/main.js').content.not.toMatch(/\sawait\s/);
+      harness.expectFile('dist/main.js').content.toContain('"for await...of"');
+    });
   });
 });

yarn.lock

@@ -86,7 +86,7 @@
 
 "@angular/dev-infra-private@https://github.com/angular/dev-infra-private-builds.git#a1442a839401cb9a09285fbf1cd925cf51390ca3":
   version "0.0.0"
-  resolved "https://github.com/angular/dev-infra-private-builds.git#6707d0f4cf98242af0b5635a0cf40cdeba300c9c"
+  resolved "https://github.com/angular/dev-infra-private-builds.git#5879ecd963467fef55d090c45ebaddc80088107c"
   dependencies:
     "@angular/benchpress" "0.2.1"
     "@bazel/buildifier" "^4.0.1"
@@ -114,7 +114,7 @@
     ts-node "^10.0.0"
     tslib "^2.2.0"
     typed-graphqlify "^3.1.1"
-    typescript "~4.3.2"
+    typescript "~4.3.4"
     yaml "^1.10.0"
     yargs "^17.0.0"
 
@@ -474,7 +474,7 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.14.5"
     "@babel/plugin-proposal-optional-chaining" "^7.14.5"
 
-"@babel/plugin-proposal-async-generator-functions@^7.14.7":
+"@babel/plugin-proposal-async-generator-functions@7.14.7", "@babel/plugin-proposal-async-generator-functions@^7.14.7":
   version "7.14.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.14.7.tgz#784a48c3d8ed073f65adcf30b57bcbf6c8119ace"
   integrity sha512-RK8Wj7lXLY3bqei69/cc25gwS5puEc3dknoFPFbqfy3XxYQBQFvu4ioWpafMBAB+L9NyptQK4nMOa5Xz16og8Q==