From 2dc51d5c9cd1c40dbd97a714e3bb4d17e51c27ae Mon Sep 17 00:00:00 2001
From: Charles Lyding <19598772+clydin@users.noreply.github.com>
Date: Mon, 1 Jul 2024 14:38:05 -0400
Subject: [PATCH] fix(@angular/build): support import attributes in JavaScript
 transformer

The babel-based JavaScript transformer currently requires a syntax plugin
to support import attributes. Import attributes are otherwise supported in
application code. However, in production builds the JavaScript transformations
such as the build optimizer passes would fail on code that contain any import
attributes. The inclusion of the babel syntax plugin removes this problem.
Once babel provides built-in support for this syntax feature, the plugin
can be removed.
---
 package.json                                                  | 1 +
 packages/angular/build/BUILD.bazel                            | 1 +
 packages/angular/build/package.json                           | 1 +
 .../build/src/tools/esbuild/javascript-transformer-worker.ts  | 4 +++-
 yarn.lock                                                     | 4 +++-
 5 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index c03000617687..6a556fb6685d 100644
--- a/package.json
+++ b/package.json
@@ -73,6 +73,7 @@
     "@babel/generator": "7.24.7",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
+    "@babel/plugin-syntax-import-attributes": "7.24.7",
     "@babel/plugin-transform-async-generator-functions": "7.24.7",
     "@babel/plugin-transform-async-to-generator": "7.24.7",
     "@babel/plugin-transform-runtime": "7.24.7",
diff --git a/packages/angular/build/BUILD.bazel b/packages/angular/build/BUILD.bazel
index 9c337ffa1675..0b7b78e9a1d6 100644
--- a/packages/angular/build/BUILD.bazel
+++ b/packages/angular/build/BUILD.bazel
@@ -67,6 +67,7 @@ ts_library(
         "@npm//@babel/core",
         "@npm//@babel/helper-annotate-as-pure",
         "@npm//@babel/helper-split-export-declaration",
+        "@npm//@babel/plugin-syntax-import-attributes",
         "@npm//@inquirer/confirm",
         "@npm//@types/babel__core",
         "@npm//@types/less",
diff --git a/packages/angular/build/package.json b/packages/angular/build/package.json
index eddb849ce8fe..b9c4885e2c5d 100644
--- a/packages/angular/build/package.json
+++ b/packages/angular/build/package.json
@@ -23,6 +23,7 @@
     "@babel/core": "7.24.7",
     "@babel/helper-annotate-as-pure": "7.24.7",
     "@babel/helper-split-export-declaration": "7.24.7",
+    "@babel/plugin-syntax-import-attributes": "7.24.7",
     "@inquirer/confirm": "3.1.12",
     "@vitejs/plugin-basic-ssl": "1.1.0",
     "ansi-colors": "4.1.3",
diff --git a/packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts b/packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts
index 18555276c42c..44396473f954 100644
--- a/packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts
+++ b/packages/angular/build/src/tools/esbuild/javascript-transformer-worker.ts
@@ -60,7 +60,9 @@ async function transformWithBabel(
     options.sourcemap &&
     (!!options.thirdPartySourcemaps || !/[\\/]node_modules[\\/]/.test(filename));
 
-  const plugins: PluginItem[] = [];
+  // @ts-expect-error Import attribute syntax plugin does not currently have type definitions
+  const { default: importAttributePlugin } = await import('@babel/plugin-syntax-import-attributes');
+  const plugins: PluginItem[] = [importAttributePlugin];
 
   // Lazy load the linker plugin only when linking is required
   if (shouldLink) {
diff --git a/yarn.lock b/yarn.lock
index 9cd898f30002..84e612e23a3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -399,6 +399,7 @@ __metadata:
     "@babel/core": "npm:7.24.7"
     "@babel/helper-annotate-as-pure": "npm:7.24.7"
     "@babel/helper-split-export-declaration": "npm:7.24.7"
+    "@babel/plugin-syntax-import-attributes": "npm:7.24.7"
     "@inquirer/confirm": "npm:3.1.12"
     "@vitejs/plugin-basic-ssl": "npm:1.1.0"
     ansi-colors: "npm:4.1.3"
@@ -657,6 +658,7 @@ __metadata:
     "@babel/generator": "npm:7.24.7"
     "@babel/helper-annotate-as-pure": "npm:7.24.7"
     "@babel/helper-split-export-declaration": "npm:7.24.7"
+    "@babel/plugin-syntax-import-attributes": "npm:7.24.7"
     "@babel/plugin-transform-async-generator-functions": "npm:7.24.7"
     "@babel/plugin-transform-async-to-generator": "npm:7.24.7"
     "@babel/plugin-transform-runtime": "npm:7.24.7"
@@ -1487,7 +1489,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-import-attributes@npm:^7.24.7":
+"@babel/plugin-syntax-import-attributes@npm:7.24.7, @babel/plugin-syntax-import-attributes@npm:^7.24.7":
   version: 7.24.7
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.24.7"
   dependencies: