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.

(cherry picked from commit 2fabeab)

Author: alan-agius4

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 = {

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.

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');
+}