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

Closes #21196

Author: alan-agius4

package.json

@@ -85,6 +85,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

@@ -14,6 +14,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

@@ -94,14 +94,13 @@
 
 "@angular/dev-infra-private@https://github.com/angular/dev-infra-private-builds.git#86a00e67800320e315821fa74bd301125d4868ca":
   version "0.0.0"
-  uid "86a00e67800320e315821fa74bd301125d4868ca"
-  resolved "https://github.com/angular/dev-infra-private-builds.git#86a00e67800320e315821fa74bd301125d4868ca"
+  resolved "https://github.com/angular/dev-infra-private-builds.git#5879ecd963467fef55d090c45ebaddc80088107c"
   dependencies:
     "@angular/benchpress" "0.2.1"
     "@bazel/buildifier" "^4.0.1"
     "@octokit/graphql" "^4.6.1"
-    "@octokit/rest" "^18.6.2"
-    "@octokit/types" "^6.16.6"
+    "@octokit/rest" "16.43.2"
+    "@octokit/types" "^6.0.0"
     brotli "^1.3.2"
     chalk "^4.1.0"
     clang-format "^1.4.0"
@@ -483,7 +482,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==
@@ -10198,7 +10197,6 @@ [email protected], sass@^1.32.8:
 
 "sauce-connect-proxy@https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz":
   version "0.0.0"
-  uid "992e2cb0d91e54b27a4f5bbd2049f3b774718115"
   resolved "https://saucelabs.com/downloads/sc-4.6.4-linux.tar.gz#992e2cb0d91e54b27a4f5bbd2049f3b774718115"
 
 saucelabs@^1.5.0: