fix(angular): resolve the index html transformer correctly for esbuild based build targets in dev-server (#21679)

packages/angular/src/builders/dev-server/dev-server.impl.ts

@@ -24,6 +24,7 @@ import { combineLatest, from } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { getInstalledAngularVersionInfo } from '../../executors/utilities/angular-version-utils';
 import {
+  loadIndexHtmlTransformer,
   loadMiddleware,
   loadPlugins,
   type PluginSpec,
@@ -182,62 +183,72 @@ export function executeDevServerBuilder(
     from(
       loadMiddleware(options.esbuildMiddleware, buildTargetOptions.tsConfig)
     ),
-  ]).pipe(
+    from(
-    switchMap(([{ executeDevServerBuilder }, plugins, middleware]) =>
+      loadIndexHtmlFileTransformer(
-      executeDevServerBuilder(
+        pathToIndexFileTransformer,
-        delegateBuilderOptions,
+        buildTargetOptions.tsConfig,
         context,
-        {
+        isUsingWebpackBuilder
-          webpackConfiguration: isUsingWebpackBuilder
-            ? async (baseWebpackConfig) => {
-                if (!buildLibsFromSource) {
-                  const workspaceDependencies = dependencies
-                    .filter((dep) => !isNpmProject(dep.node))
-                    .map((dep) => dep.node.name);
-                  // default for `nx run-many` is --all projects
-                  // by passing an empty string for --projects, run-many will default to
-                  // run the target for all projects.
-                  // This will occur when workspaceDependencies = []
-                  if (workspaceDependencies.length > 0) {
-                    baseWebpackConfig.plugins.push(
-                      // @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
-                      new WebpackNxBuildCoordinationPlugin(
-                        `nx run-many --target=${
-                          parsedBuildTarget.target
-                        } --projects=${workspaceDependencies.join(',')}`
-                      )
-                    );
-                  }
-                }
-
-                if (!pathToWebpackConfig) {
-                  return baseWebpackConfig;
-                }
-
-                return mergeCustomWebpackConfig(
-                  baseWebpackConfig,
-                  pathToWebpackConfig,
-                  buildTargetOptions,
-                  context.target
-                );
-              }
-            : undefined,
-
-          ...(pathToIndexFileTransformer
-            ? {
-                indexHtml: resolveIndexHtmlTransformer(
-                  pathToIndexFileTransformer,
-                  buildTargetOptions.tsConfig,
-                  context.target
-                ),
-              }
-            : {}),
-        },
-        {
-          buildPlugins: plugins,
-          middleware,
-        }
       )
+    ),
+  ]).pipe(
+    switchMap(
+      ([
+        { executeDevServerBuilder },
+        plugins,
+        middleware,
+        indexHtmlTransformer,
+      ]) =>
+        executeDevServerBuilder(
+          delegateBuilderOptions,
+          context,
+          {
+            webpackConfiguration: isUsingWebpackBuilder
+              ? async (baseWebpackConfig) => {
+                  if (!buildLibsFromSource) {
+                    const workspaceDependencies = dependencies
+                      .filter((dep) => !isNpmProject(dep.node))
+                      .map((dep) => dep.node.name);
+                    // default for `nx run-many` is --all projects
+                    // by passing an empty string for --projects, run-many will default to
+                    // run the target for all projects.
+                    // This will occur when workspaceDependencies = []
+                    if (workspaceDependencies.length > 0) {
+                      baseWebpackConfig.plugins.push(
+                        // @ts-expect-error - difference between angular and webpack plugin definitions bc of webpack versions
+                        new WebpackNxBuildCoordinationPlugin(
+                          `nx run-many --target=${
+                            parsedBuildTarget.target
+                          } --projects=${workspaceDependencies.join(',')}`
+                        )
+                      );
+                    }
+                  }
+
+                  if (!pathToWebpackConfig) {
+                    return baseWebpackConfig;
+                  }
+
+                  return mergeCustomWebpackConfig(
+                    baseWebpackConfig,
+                    pathToWebpackConfig,
+                    buildTargetOptions,
+                    context.target
+                  );
+                }
+              : undefined,
+
+            ...(indexHtmlTransformer
+              ? {
+                  indexHtml: indexHtmlTransformer,
+                }
+              : {}),
+          },
+          {
+            buildPlugins: plugins,
+            middleware,
+          }
+        )
     )
   );
 }
@@ -267,6 +278,25 @@ function getDelegateBuilderOptions(
   return delegateBuilderOptions;
 }
 
+async function loadIndexHtmlFileTransformer(
+  pathToIndexFileTransformer: string | undefined,
+  tsConfig: string,
+  context: BuilderContext,
+  isUsingWebpackBuilder: boolean
+) {
+  if (!pathToIndexFileTransformer) {
+    return undefined;
+  }
+
+  return isUsingWebpackBuilder
+    ? resolveIndexHtmlTransformer(
+        pathToIndexFileTransformer,
+        tsConfig,
+        context.target
+      )
+    : await loadIndexHtmlTransformer(pathToIndexFileTransformer, tsConfig);
+}
+
 const executorToBuilderMap = new Map<string, string>([
   [
     '@nx/angular:browser-esbuild',