refactor: update image-directive e2e test to work with ESM (#48538)

* Switches to the canonical dev-infra http server
* Uses the bundle for serving.
* Switches app_bundle to simple `esbuild` since the test relies
  on `ngDevMode` which `app_bundle` elides as optimization.

PR Close #48538

packages/core/test/bundling/image-directive/BUILD.bazel

@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "app_bundle", "ng_module", "protractor_web_test_suite", "ts_devserver", "ts_library")
+load("//tools:defaults.bzl", "esbuild", "http_server", "ng_module", "protractor_web_test_suite", "ts_library")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -22,7 +22,9 @@ ng_module(
     ],
 )
 
-app_bundle(
+# Note: Cannot use `app_bundle` as the e2e tests rely on `ngDevMode`
+# output which would otherwise be omitted.
+esbuild(
     name = "bundle",
     entry_point = ":index.ts",
     deps = [
@@ -35,35 +37,19 @@ app_bundle(
     ],
 )
 
-genrule(
-    name = "tslib",
-    srcs = [
-        "@npm//:node_modules/tslib/tslib.js",
-    ],
-    outs = [
-        "tslib.js",
-    ],
-    cmd = "cp $< $@",
-)
-
-ts_devserver(
+http_server(
     name = "devserver",
-    bootstrap = ["//packages/zone.js/bundles:zone.umd.js"],
-    entry_module = "@angular/core/test/bundling/image-directive",
-    port = 4200,
-    scripts = [
-        "//tools/rxjs:rxjs_umd_modules",
-    ],
-    serving_path = "/bundle.min.js",
-    static_files = [
-        "index.html",
-        ":tslib",
+    srcs = [
         "e2e/a.png",
         "e2e/b.png",
-        "e2e/logo-500w.jpg",
         "e2e/logo-1500w.jpg",
+        "e2e/logo-500w.jpg",
+        "index.html",
+    ],
+    deps = [
+        ":bundle",
+        "//packages/zone.js/bundles:zone.umd.js",
     ],
-    deps = [":image-directive"],
 )
 
 ts_library(

packages/core/test/bundling/image-directive/e2e/start-server.js

@@ -14,7 +14,7 @@ const protractor = require('protractor');
  * Used as a part of the `protractor_web_test_suite` rule configuration.
  */
 module.exports = async function(config) {
-  const {port} = await protractorUtils.runServer(config.workspace, config.server, '-port', []);
+  const {port} = await protractorUtils.runServer(config.workspace, config.server, '--port', []);
   const serverUrl = `http://localhost:${port}`;
 
   protractor.browser.baseUrl = serverUrl;

packages/core/test/bundling/image-directive/index.html

@@ -10,24 +10,7 @@
 
     <app-root></app-root>
 
-    <!--
-      Script tag which bootstraps the application. Use `?debug` in URL to select
-      the debug version of the script.
-
-      There are two scripts sources: `bundle.min.js` and `bundle.debug.min.js` You can
-      switch between which bundle the browser loads to experiment with the application.
-
-      - `bundle.min.js`: Is what the site would serve to their users. It has gone
-        through rollup, build-optimizer, and uglify with tree shaking.
-      - `bundle.debug.min.js`: Is what the developer would like to see when debugging
-        the application. It has also gone through full pipeline of esbuild, babel optimization,
-        plugins from the devkit and terser, however mangling is disabled and the minified
-        file is formatted using prettier (to ease debugging).
-    -->
-    <script>
-        document.write('<script src="' +
-          (document.location.search.endsWith('debug') ? '/bundle.debug.min.js' : '/bundle.min.js') +
-          '"></' + 'script>');
-    </script>
+    <script src="angular/packages/zone.js/bundles/zone.umd.js"></script>
+    <script src="bundle.js"></script>
   </body>
 </html>