From a3acff465468b90af4efc0c9129c8a62d51a3bdf Mon Sep 17 00:00:00 2001
From: Alan Agius <alanagius@google.com>
Date: Fri, 28 Apr 2023 13:16:17 +0000
Subject: [PATCH] fix(@angular-devkit/build-angular): JIT support for
 standalone applications

This commit fixes and issue were standalone applications would fail during runtime because the `@angular/compiler` is not available.

We now add the `@angular/compiler` as part of the bundle when JIT mode is enabled.
---
 .../src/builders/browser-esbuild/index.ts     |  6 ++++-
 .../src/webpack/configs/common.ts             |  8 +++++--
 .../e2e/tests/build/jit-standalone.ts         | 23 +++++++++++++++++++
 3 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 tests/legacy-cli/e2e/tests/build/jit-standalone.ts

diff --git a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
index c573f2a168f9..4722871dd59e 100644
--- a/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
+++ b/packages/angular_devkit/build_angular/src/builders/browser-esbuild/index.ts
@@ -327,7 +327,6 @@ function createCodeBundleOptions(
   const {
     workspaceRoot,
     entryPoints,
-    polyfills,
     optimizationOptions,
     sourcemapOptions,
     tsconfig,
@@ -412,6 +411,11 @@ function createCodeBundleOptions(
     },
   };
 
+  const polyfills = options.polyfills ? [...options.polyfills] : [];
+  if (jit) {
+    polyfills.push('@angular/compiler');
+  }
+
   if (polyfills?.length) {
     const namespace = 'angular:polyfills';
     buildOptions.entryPoints = {
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
index 476b0e388bcf..4d8d70835ff1 100644
--- a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
+++ b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
@@ -58,7 +58,6 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     aot = true,
     codeCoverageExclude = [],
     main,
-    polyfills,
     sourceMap: {
       styles: stylesSourceMap,
       scripts: scriptsSourceMap,
@@ -126,7 +125,12 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
     }
   }
 
-  if (polyfills?.length) {
+  const polyfills = [...buildOptions.polyfills];
+  if (!aot) {
+    polyfills.push('@angular/compiler');
+  }
+
+  if (polyfills.length) {
     // `zone.js/testing` is a **special** polyfill because when not imported in the main it fails with the below errors:
     // `Error: Expected to be running in 'ProxyZone', but it was not found.`
     // This was also the reason why previously it was imported in `test.ts` as the first module.
diff --git a/tests/legacy-cli/e2e/tests/build/jit-standalone.ts b/tests/legacy-cli/e2e/tests/build/jit-standalone.ts
new file mode 100644
index 000000000000..952f23c6612c
--- /dev/null
+++ b/tests/legacy-cli/e2e/tests/build/jit-standalone.ts
@@ -0,0 +1,23 @@
+import { ng } from '../../utils/process';
+import { updateJsonFile, useCIChrome, useCIDefaults } from '../../utils/project';
+
+export default async function () {
+  await ng('generate', 'app', 'test-project-two', '--standalone', '--skip-install');
+
+  // Make prod use JIT.
+  await updateJsonFile('angular.json', (configJson) => {
+    const appArchitect = configJson.projects['test-project-two'].architect;
+    const config = appArchitect.build.configurations;
+    config['production'].aot = false;
+    config['production'].buildOptimizer = false;
+    config['development'].aot = false;
+  });
+
+  // Setup testing to use CI Chrome.
+  await useCIChrome('test-project-two', './e2e/');
+  await useCIDefaults('test-project-two');
+
+  // Test it works
+  await ng('e2e', '--configuration=production');
+  await ng('e2e', '--configuration=development');
+}