test: make tree test work in g3 (#32274)

This PR modifies the tree render3 (ivy) test so that it works in g3.
Namely, the index.ts must be named index_aot.ts and scripts should be
loaded via ts_devserver and not as an explicit script tag in the HTML.

PR Close #32274

modules/benchmarks/src/tree/render3/BUILD.bazel

@@ -6,20 +6,22 @@ load("//modules/benchmarks:benchmark_test.bzl", "benchmark_test")
 
 ng_module(
     name = "tree_lib",
-    srcs = glob(["**/*.ts"]),
+    srcs = [
+        "index_aot.ts",
+        "tree.ts",
+    ],
     tags = ["ivy-only"],
     deps = [
         "//modules/benchmarks/src/tree:util_lib",
         "//packages:types",
         "//packages/common",
         "//packages/core",
-        "@npm//reflect-metadata",
     ],
 )
 
 ng_rollup_bundle(
     name = "bundle",
-    entry_point = ":index.ts",
+    entry_point = ":index_aot.ts",
     tags = ["ivy-only"],
     deps = [
         ":tree_lib",
@@ -29,12 +31,12 @@ ng_rollup_bundle(
 
 ts_devserver(
     name = "devserver",
-    static_files = [
+    index_html = "index.html",
-        ":bundle.min_debug.js",
+    port = 4200,
-        ":bundle.min.js",
-        "index.html",
-    ],
     tags = ["ivy-only"],
+    deps = [
+        ":bundle.min_debug.js",
+    ],
 )
 
 benchmark_test(

modules/benchmarks/src/tree/render3/index.html

@@ -31,11 +31,5 @@
     <tree id="root"></tree>
   </div>
 
-  <script>
-    // TODO(mlaval): remove once we have a proper solution
-    ngDevMode = false;
-    var bazelBundle = document.location.search.endsWith('debug') ? 'bundle.min_debug.js' : 'bundle.min.js';
-    document.write('<script src="' + bazelBundle + '">\u003c/script>');
-  </script>
 </body>
 </html>

modules/benchmarks/src/tree/render3/index_aot.ts

@@ -6,7 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import 'reflect-metadata';
 import {ɵrenderComponent as renderComponent} from '@angular/core';
 import {bindAction, profile} from '../../util';
 import {TreeComponent, createDom, destroyDom, detectChanges} from './tree';

modules/benchmarks/src/tree/render3/tree.ts

@@ -9,7 +9,7 @@
 import {CommonModule} from '@angular/common';
 import {Component, NgModule, ɵdetectChanges} from '@angular/core';
 
-import {TreeNode, buildTree, emptyTree} from '../util';
+import {buildTree, emptyTree} from '../util';
 
 export function destroyDom(component: TreeComponent) {
   component.data = emptyTree;
@@ -34,8 +34,11 @@ export function detectChanges(component: TreeComponent) {
 @Component({
   selector: 'tree',
   inputs: ['data'],
-  template:
+  template: `
-      `<span [style.backgroundColor]="bgColor"> {{data.value}} </span><tree *ngIf='data.right != null' [data]='data.right'></tree><tree *ngIf='data.left != null' [data]='data.left'></tree>`
+    <span [style.backgroundColor]="bgColor"> {{data.value}} </span>
+    <tree *ngIf='data.right != null' [data]='data.right'></tree>
+    <tree *ngIf='data.left != null' [data]='data.left'></tree>
+  `,
 })
 export class TreeComponent {
   data: any = emptyTree;