build: adjust bundling tests to use Angular CLI

Instead of dev-infra maintaining a custom ESBuild + Terser pipeline that tries to emulate the Angular CLI, we are switching the bundling core tests to a new rule that really leverages the Angular CLI. This involves some file renames and small adjustments. In addition, we leverage the updated symbol tracking rule to output new goldens that can work with multiple bundle files (as generated by the Angular CLI; especially with defer and its "lazy" chunks).
2026-09-14 13:54:52 +08:00 · 2025-05-22 15:16:28 +00:00
parent f521b6c99f
commit e910893fa6
62 changed files with 9463 additions and 8173 deletions
@@ -3,10 +3,17 @@
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=-151232324
 adev/shared-docs/pipeline/api-gen/package.json=939673974
-package.json=1801177040
+package.json=1628072366
+packages/animations/package.json=-678724831
+packages/common/package.json=1729763064
 packages/compiler-cli/package.json=-1765181548
 packages/compiler/package.json=1190056499
-pnpm-lock.yaml=-6025827
-pnpm-workspace.yaml=-1822660674
+packages/core/package.json=1154833122
+packages/core/test/bundling/package.json=1175613456
+packages/forms/package.json=-877154917
+packages/platform-browser/package.json=-1163479450
+packages/router/package.json=860819913
+pnpm-lock.yaml=1187607951
+pnpm-workspace.yaml=-1870270384
 tools/bazel/rules_angular_store/package.json=-239561259
 yarn.lock=2018509044
@@ -41,6 +41,13 @@ modules/ssr-benchmarks/node_modules

 # For rules_js
 adev/shared-docs/pipeline/api-gen/node_modules
-packages/compiler/node_modules
+packages/animations/node_modules
+packages/common/node_modules
 packages/compiler-cli/node_modules
+packages/compiler/node_modules
+packages/core/node_modules
+packages/core/test/bundling/node_modules
+packages/forms/node_modules
+packages/platform-browser/node_modules
+packages/router/node_modules
 tools/bazel/rules_angular_store/node_modules
@@ -109,8 +109,15 @@ npm_translate_lock(
        "//:package.json",
        "//:pnpm-workspace.yaml",
        "//adev/shared-docs/pipeline/api-gen:package.json",
+        "//packages/animations:package.json",
+        "//packages/common:package.json",
        "//packages/compiler:package.json",
        "//packages/compiler-cli:package.json",
+        "//packages/core:package.json",
+        "//packages/core/test/bundling:package.json",
+        "//packages/forms:package.json",
+        "//packages/platform-browser:package.json",
+        "//packages/router:package.json",
        "//tools/bazel/rules_angular_store:package.json",
    ],
    npmrc = "//:.npmrc",
@@ -273,7 +280,7 @@ setup_dependencies_2()

 git_repository(
    name = "rules_angular",
-    commit = "5b9b1fc545736b8b602a216f89134c1f20d3009c",
+    commit = "8952a28010d584280cf674c41f684a36c22dec08",
    remote = "https://github.com/devversion/rules_angular.git",
 )

@@ -1,5 +1,5 @@
 load("//tools:defaults.bzl", "api_golden_test", "api_golden_test_npm_package", "generate_api_docs", "ng_package")
-load("//tools:defaults2.bzl", "ng_project")
+load("//tools:defaults2.bzl", "ng_project", "npm_package")

 package(default_visibility = ["//visibility:public"])

@@ -44,6 +44,16 @@ ng_package(
    ],
 )

+# TODO(devversion): Temporary early `npm_package` for making this package usable in `core/test/bundling`.
+# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
+npm_package(
+    name = "pkg",
+    srcs = [":npm_package"],
+    replace_prefixes = {
+        "npm_package/": "",
+    },
+)
+
 api_golden_test_npm_package(
    name = "animations_api",
    data = [
@@ -1,7 +1,7 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "generated_file_test")
 load("//packages/common/locales:index.bzl", "generate_base_currencies_file")
 load("//tools:defaults.bzl", "api_golden_test", "api_golden_test_npm_package", "generate_api_docs", "ng_package")
-load("//tools:defaults2.bzl", "ng_project")
+load("//tools:defaults2.bzl", "ng_project", "npm_package")

 package(default_visibility = ["//visibility:public"])

@@ -70,6 +70,16 @@ ng_package(
    ],
 )

+# TODO(devversion): Temporary early `npm_package` for making this package usable in `core/test/bundling`.
+# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
+npm_package(
+    name = "pkg",
+    srcs = [":npm_package"],
+    replace_prefixes = {
+        "npm_package/": "",
+    },
+)
+
 api_golden_test_npm_package(
    name = "common_api",
    data = [
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ng_package", "pkg_npm", "tsec_test")
+load("//tools:defaults.bzl", "ng_package", "tsec_test")
 load("//tools:defaults2.bzl", "npm_package", "ts_project")

 package(default_visibility = ["//visibility:public"])
@@ -57,14 +57,6 @@ npm_package(
    },
 )

-# TODO(devversion): Temporary linkable `pkg_npm` for making compiler usable with the rules_nodejs linker.
-# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
-pkg_npm(
-    name = "linkable_npm_package",
-    package_name = "@angular/compiler",
-    nested_packages = [":npm_package"],
-)
-
 filegroup(
    name = "files_for_docgen",
    srcs = glob([
@@ -2,7 +2,7 @@ load("@build_bazel_rules_nodejs//:index.bzl", "generated_file_test")
 load("//adev/shared-docs/pipeline/api-gen:generate_api_docs.bzl", "generate_api_docs")
 load("//packages/common/locales:index.bzl", "generate_base_locale_file")
 load("//tools:defaults.bzl", "api_golden_test", "api_golden_test_npm_package", "ng_package", "tsec_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_config")
+load("//tools:defaults2.bzl", "ng_project", "npm_package", "ts_config")

 package(default_visibility = ["//visibility:public"])

@@ -104,6 +104,16 @@ ng_package(
    ],
 )

+# TODO(devversion): Temporary early `npm_package` for making this package usable in `core/test/bundling`.
+# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
+npm_package(
+    name = "pkg",
+    srcs = [":npm_package"],
+    replace_prefixes = {
+        "npm_package/": "",
+    },
+)
+
 api_golden_test_npm_package(
    name = "core_api",
    data = [
@@ -0,0 +1,3 @@
+load("@npm2//:defs.bzl", "npm_link_all_packages")
+
+npm_link_all_packages()
@@ -10,17 +10,20 @@ yarn run symbol-extractor:check
 yarn run symbol-extractor:update
 ```

-## Debugging 
+## Debugging

-You can inspect the build output of each project by using the `bundle.debug` target. 
+You can inspect the build output of each project by building the `:bundles` target.

-```
-yarn bazel build  //packages/core/test/bundling/standalone_bootstrap:bundle.debug
+```bash
+yarn bazel build //packages/core/test/bundling/standalone_bootstrap:bundles
 ```

-This target mostly tree shakes while keeping the symbols. To have a look at the minimal output (with inlining etc.) use the 
-`bundle.debug.min` target.
+This output is always unmangled and can be easily used for debugging. Alternatively, you
+can also serve the output by running:

+```bash
+yarn bazel run //packages/core/test/bundling/standalone_bootstrap:bundles.serve
 ```
-yarn bazel build  //packages/core/test/bundling/standalone_bootstrap:bundle.debug.min
-```
+
+If needed, you can also control the Angular CLI optimizations via environment variables that
+you can set via the `env` attribute in `BUILD.bazel` of each test.
@@ -1,26 +1,26 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "animations_standalone",
-    srcs = ["index.ts"],
-    interop_deps = [
-        "//packages/core",
-        "//packages/platform-browser",
-        "//packages/platform-browser/animations",
+optimize_angular_app(
+    name = "bundles",
+    srcs = [
+        "main.ts",
    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":animations_standalone",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/animations",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -42,25 +42,13 @@ ts_project(
 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "prodserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -1,35 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-
-<head>
-    <title>Angular Animations Example</title>
-</head>
-
-<body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-
-    <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>
-</body>
-
-</html>
@@ -6,9 +6,9 @@
 * found in the LICENSE file at https://angular.dev/license
 */
 import {animate, style, transition, trigger} from '@angular/animations';
-import {Component, NgModule, ɵNgModuleFactory as NgModuleFactory} from '../../../src/core';
-import {bootstrapApplication, BrowserModule, platformBrowser} from '@angular/platform-browser';
-import {BrowserAnimationsModule, provideAnimations} from '@angular/platform-browser/animations';
+import {Component, provideZonelessChangeDetection} from '@angular/core';
+import {bootstrapApplication} from '@angular/platform-browser';
+import {provideAnimations} from '@angular/platform-browser/animations';

@Component({
  selector: 'app-animations',
@@ -34,4 +34,6 @@ class AnimationsComponent {
 })
 class RootComponent {}

-(window as any).waitForApp = bootstrapApplication(RootComponent, {providers: provideAnimations()});
+(window as any).waitForApp = bootstrapApplication(RootComponent, {
+  providers: [provideZonelessChangeDetection(), provideAnimations()],
+});
@@ -8,25 +8,18 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/animations-standalone';
-
 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve(
+    'packages/core/test/bundling/animations-standalone/bundles/main.js',
+  );
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -1,36 +0,0 @@
-load("@npm//@angular/build-tooling/bazel/map-size-tracking:index.bzl", "js_mapping_size_test")
-load("//tools:defaults.bzl", "app_bundle")
-load("//tools:defaults2.bzl", "ts_project")
-
-package(default_visibility = ["//visibility:public"])
-
-ts_project(
-    name = "core_all",
-    srcs = ["index.ts"],
-    interop_deps = [
-        "//packages/core",
-    ],
-    tags = [],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
-    deps = [
-        ":core_all",
-        "//packages/core",
-        "@npm//rxjs",
-    ],
-)
-
-js_mapping_size_test(
-    name = "size_test",
-    src = ":bundle.min.js",
-    golden_file = ":bundle.golden_size_map.json",
-    max_byte_diff = 250,
-    max_percentage_diff = 15,
-    source_map = ":bundle.min.js.map",
-    tags = [
-        "manual",
-    ],
-)
@@ -1,474 +0,0 @@
-{
-  "unmapped": 949,
-  "files": {
-    "node_modules/": {
-      "rxjs/": {
-        "size": 8945,
-        "src/": {
-          "internal/": {
-            "BehaviorSubject.ts": 306,
-            "NotificationFactories.ts": 111,
-            "Observable.ts": 897,
-            "Subject.ts": 1929,
-            "Subscriber.ts": 1512,
-            "Subscription.ts": 1272,
-            "config.ts": 142,
-            "operators/": {
-              "OperatorSubscriber.ts": 541,
-              "defaultIfEmpty.ts": 112,
-              "filter.ts": 94,
-              "first.ts": 111,
-              "map.ts": 88,
-              "size": 1169,
-              "take.ts": 77,
-              "throwIfEmpty.ts": 146
-            },
-            "scheduler/": {
-              "size": 204,
-              "timeoutProvider.ts": 204
-            },
-            "size": 8945,
-            "symbol/": {
-              "observable.ts": 72,
-              "size": 72
-            },
-            "util/": {
-              "EmptyError.ts": 92,
-              "ObjectUnsubscribedError.ts": 101,
-              "UnsubscriptionError.ts": 209,
-              "arrRemove.ts": 62,
-              "createErrorClass.ts": 147,
-              "errorContext.ts": 271,
-              "identity.ts": 24,
-              "isFunction.ts": 42,
-              "lift.ts": 192,
-              "noop.ts": 15,
-              "pipe.ts": 97,
-              "reportUnhandledError.ts": 79,
-              "size": 1331
-            }
-          },
-          "size": 8945
-        }
-      },
-      "size": 8945
-    },
-    "packages/": {
-      "core/": {
-        "index.ts": 14498,
-        "primitives/": {
-          "signals/": {
-            "size": 4938,
-            "src/": {
-              "computed.ts": 585,
-              "equality.ts": 39,
-              "errors.ts": 53,
-              "graph.ts": 3207,
-              "signal.ts": 291,
-              "size": 4938,
-              "watch.ts": 747,
-              "weak_ref.ts": 16
-            }
-          },
-          "size": 4938
-        },
-        "size": 235007,
-        "src/": {
-          "application/": {
-            "application_config.ts": 120,
-            "application_init.ts": 600,
-            "application_module.ts": 125,
-            "application_ngmodule_factory_compiler.ts": 61,
-            "application_ref.ts": 2997,
-            "application_tokens.ts": 492,
-            "create_application.ts": 639,
-            "size": 5034
-          },
-          "authoring/": {
-            "input/": {
-              "input.ts": 98,
-              "input_signal.ts": 178,
-              "input_signal_node.ts": 117,
-              "size": 393
-            },
-            "model/": {
-              "model.ts": 101,
-              "model_signal.ts": 371,
-              "size": 472
-            },
-            "output/": {
-              "output.ts": 65,
-              "output_ref.ts": 423,
-              "size": 488
-            },
-            "queries.ts": 244,
-            "size": 1597
-          },
-          "cached_injector_service.ts": 429,
-          "change_detection/": {
-            "change_detection.ts": 50,
-            "change_detector_ref.ts": 206,
-            "constants.ts": 81,
-            "differs/": {
-              "default_iterable_differ.ts": 6632,
-              "default_keyvalue_differ.ts": 3295,
-              "iterable_differs.ts": 435,
-              "keyvalue_differs.ts": 423,
-              "size": 10785
-            },
-            "flags.ts": 50,
-            "scheduling/": {
-              "ng_zone_scheduling.ts": 1749,
-              "size": 2548,
-              "zoneless_scheduling.ts": 11,
-              "zoneless_scheduling_impl.ts": 788
-            },
-            "size": 13720
-          },
-          "compiler/": {
-            "compiler_facade.ts": 129,
-            "compiler_facade_interface.ts": 172,
-            "size": 301
-          },
-          "console.ts": 145,
-          "debug/": {
-            "debug_node.ts": 4053,
-            "size": 4053
-          },
-          "defer/": {
-            "cleanup.ts": 189,
-            "discovery.ts": 280,
-            "dom_triggers.ts": 1577,
-            "idle_scheduler.ts": 1265,
-            "instructions.ts": 4541,
-            "interfaces.ts": 480,
-            "size": 10877,
-            "timer_scheduler.ts": 1671,
-            "utils.ts": 874
-          },
-          "di/": {
-            "contextual.ts": 165,
-            "create_injector.ts": 223,
-            "forward_ref.ts": 236,
-            "initializer_token.ts": 13,
-            "inject_switch.ts": 213,
-            "injectable.ts": 58,
-            "injection_token.ts": 312,
-            "injector.ts": 288,
-            "injector_compatibility.ts": 1336,
-            "injector_token.ts": 16,
-            "interface/": {
-              "defs.ts": 530,
-              "injector.ts": 152,
-              "provider.ts": 45,
-              "size": 727
-            },
-            "internal_tokens.ts": 13,
-            "jit/": {
-              "environment.ts": 152,
-              "injectable.ts": 909,
-              "size": 1864,
-              "util.ts": 803
-            },
-            "metadata.ts": 130,
-            "metadata_attr.ts": 74,
-            "null_injector.ts": 141,
-            "provider_collection.ts": 1414,
-            "r3_injector.ts": 3454,
-            "scope.ts": 17,
-            "size": 10694
-          },
-          "error_details_base_url.ts": 38,
-          "error_handler.ts": 324,
-          "errors.ts": 125,
-          "event_emitter.ts": 534,
-          "hydration/": {
-            "annotate.ts": 2887,
-            "api.ts": 585,
-            "cleanup.ts": 456,
-            "compression.ts": 332,
-            "error_handling.ts": 2735,
-            "interfaces.ts": 138,
-            "node_lookup_utils.ts": 1537,
-            "size": 10930,
-            "skip_hydration.ts": 419,
-            "tokens.ts": 65,
-            "utils.ts": 1453,
-            "views.ts": 323
-          },
-          "i18n/": {
-            "locale_data_api.ts": 1372,
-            "locale_en.ts": 976,
-            "localization.ts": 134,
-            "size": 2770,
-            "tokens.ts": 288
-          },
-          "interface/": {
-            "simple_change.ts": 134,
-            "size": 188,
-            "type.ts": 54
-          },
-          "linker/": {
-            "compiler.ts": 639,
-            "component_factory.ts": 26,
-            "component_factory_resolver.ts": 187,
-            "destroy_ref.ts": 229,
-            "element_ref.ts": 225,
-            "ng_module_factory.ts": 26,
-            "ng_module_factory_loader.ts": 181,
-            "ng_module_registration.ts": 237,
-            "query_list.ts": 1180,
-            "size": 6152,
-            "template_ref.ts": 549,
-            "view_container_ref.ts": 2625,
-            "view_ref.ts": 48
-          },
-          "metadata/": {
-            "di.ts": 438,
-            "directives.ts": 397,
-            "ng_module.ts": 52,
-            "resource_loading.ts": 1224,
-            "schema.ts": 61,
-            "size": 2280,
-            "view.ts": 108
-          },
-          "pending_tasks.ts": 566,
-          "platform/": {
-            "platform.ts": 692,
-            "platform_core_providers.ts": 26,
-            "platform_ref.ts": 1403,
-            "size": 2121
-          },
-          "reflection/": {
-            "reflection_capabilities.ts": 2610,
-            "size": 2610
-          },
-          "render/": {
-            "api.ts": 172,
-            "api_flags.ts": 93,
-            "size": 265
-          },
-          "render3/": {
-            "after_render_hooks.ts": 2145,
-            "apply_value_input_field.ts": 68,
-            "bindings.ts": 304,
-            "collect_native_nodes.ts": 448,
-            "component.ts": 462,
-            "component_ref.ts": 3828,
-            "context_discovery.ts": 1984,
-            "debug/": {
-              "injector_profiler.ts": 116,
-              "set_debug_info.ts": 54,
-              "size": 170
-            },
-            "definition.ts": 2629,
-            "definition_factory.ts": 56,
-            "deps_tracker/": {
-              "deps_tracker.ts": 3497,
-              "size": 3497
-            },
-            "di.ts": 3947,
-            "di_setup.ts": 1769,
-            "errors_di.ts": 72,
-            "features/": {
-              "copy_definition_feature.ts": 269,
-              "host_directives_feature.ts": 663,
-              "inherit_definition_feature.ts": 1539,
-              "input_transforms_feature.ts": 146,
-              "ng_onchanges_feature.ts": 549,
-              "providers_feature.ts": 74,
-              "size": 3888,
-              "standalone_feature.ts": 648
-            },
-            "fields.ts": 167,
-            "hooks.ts": 1528,
-            "i18n/": {
-              "i18n_apply.ts": 2293,
-              "i18n_insert_before_index.ts": 382,
-              "i18n_locale_id.ts": 84,
-              "i18n_parse.ts": 4594,
-              "i18n_postprocess.ts": 992,
-              "i18n_tree_shaking.ts": 69,
-              "i18n_util.ts": 579,
-              "size": 8993
-            },
-            "instructions/": {
-              "advance.ts": 184,
-              "attribute.ts": 78,
-              "attribute_interpolation.ts": 975,
-              "change_detection.ts": 1699,
-              "class_map_interpolation.ts": 630,
-              "component_instance.ts": 32,
-              "control_flow.ts": 2128,
-              "di.ts": 118,
-              "di_attr.ts": 30,
-              "element.ts": 1031,
-              "element_container.ts": 721,
-              "element_validation.ts": 303,
-              "get_current_view.ts": 25,
-              "host_property.ts": 190,
-              "i18n.ts": 457,
-              "i18n_icu_container_visitor.ts": 306,
-              "interpolation.ts": 1119,
-              "listener.ts": 1299,
-              "mark_view_dirty.ts": 123,
-              "next_context.ts": 28,
-              "projection.ts": 504,
-              "property.ts": 152,
-              "property_interpolation.ts": 1098,
-              "queries.ts": 304,
-              "queries_signals.ts": 106,
-              "render.ts": 637,
-              "shared.ts": 8628,
-              "size": 30155,
-              "storage.ts": 114,
-              "style_map_interpolation.ts": 549,
-              "style_prop_interpolation.ts": 738,
-              "styling.ts": 3348,
-              "template.ts": 812,
-              "text.ts": 280,
-              "text_interpolation.ts": 910,
-              "two_way.ts": 215,
-              "write_to_directive_input.ts": 284
-            },
-            "interfaces/": {
-              "container.ts": 145,
-              "context.ts": 116,
-              "document.ts": 121,
-              "i18n.ts": 158,
-              "injector.ts": 153,
-              "input_flags.ts": 148,
-              "lview_tracking.ts": 116,
-              "node.ts": 223,
-              "size": 1875,
-              "styling.ts": 286,
-              "type_checks.ts": 409
-            },
-            "jit/": {
-              "directive.ts": 5178,
-              "environment.ts": 6113,
-              "jit_options.ts": 60,
-              "module.ts": 3280,
-              "partial.ts": 946,
-              "pipe.ts": 539,
-              "size": 17102,
-              "util.ts": 986
-            },
-            "list_reconciliation.ts": 2324,
-            "local_compilation.ts": 229,
-            "metadata.ts": 475,
-            "namespaces.ts": 19,
-            "ng_module_ref.ts": 1358,
-            "node_manipulation.ts": 4901,
-            "node_manipulation_i18n.ts": 295,
-            "node_selector_matcher.ts": 2391,
-            "pipe.ts": 984,
-            "profiler.ts": 25,
-            "pure_function.ts": 1562,
-            "query.ts": 4462,
-            "query_reactive.ts": 639,
-            "queue_state_update.ts": 163,
-            "reactive_lview_consumer.ts": 280,
-            "reactivity/": {
-              "api.ts": 58,
-              "asserts.ts": 48,
-              "computed.ts": 86,
-              "effect.ts": 1498,
-              "signal.ts": 343,
-              "size": 2091,
-              "untracked.ts": 58
-            },
-            "scope.ts": 440,
-            "size": 119849,
-            "state.ts": 3262,
-            "styling/": {
-              "class_differ.ts": 180,
-              "size": 2575,
-              "static_styling.ts": 259,
-              "style_binding_list.ts": 904,
-              "styling_parser.ts": 1232
-            },
-            "tokens.ts": 9,
-            "util/": {
-              "attrs_utils.ts": 982,
-              "discovery_utils.ts": 1728,
-              "injector_utils.ts": 146,
-              "misc_utils.ts": 243,
-              "size": 4570,
-              "stringify_utils.ts": 216,
-              "view_traversal_utils.ts": 116,
-              "view_utils.ts": 1139
-            },
-            "view_engine_compatibility_prebound.ts": 32,
-            "view_manipulation.ts": 565,
-            "view_ref.ts": 1111
-          },
-          "sanitization/": {
-            "bypass.ts": 912,
-            "html_sanitizer.ts": 4101,
-            "iframe_attrs_validation.ts": 163,
-            "inert_body.ts": 685,
-            "sanitization.ts": 825,
-            "sanitizer.ts": 94,
-            "security.ts": 171,
-            "size": 7073,
-            "url_sanitizer.ts": 122
-          },
-          "size": 215554,
-          "testability/": {
-            "size": 2735,
-            "testability.ts": 2735
-          },
-          "transfer_state.ts": 967,
-          "util/": {
-            "array_utils.ts": 966,
-            "assert.ts": 146,
-            "closure.ts": 45,
-            "coercion.ts": 143,
-            "comparison.ts": 174,
-            "decorators.ts": 1450,
-            "dom.ts": 117,
-            "empty.ts": 15,
-            "errors.ts": 40,
-            "global.ts": 17,
-            "is_dev_mode.ts": 38,
-            "iterable.ts": 483,
-            "lang.ts": 109,
-            "noop.ts": 19,
-            "performance.ts": 116,
-            "property.ts": 202,
-            "raf.ts": 350,
-            "security/": {
-              "size": 604,
-              "trusted_types.ts": 270,
-              "trusted_types_bypass.ts": 334
-            },
-            "size": 5574,
-            "stringify.ts": 540
-          },
-          "version.ts": 152,
-          "view/": {
-            "provider_flags.ts": 6,
-            "size": 6
-          },
-          "zone/": {
-            "ng_zone.ts": 3445,
-            "size": 3445
-          }
-        },
-        "test/": {
-          "bundling/": {
-            "core_all/": {
-              "index.ts": 17,
-              "size": 17
-            },
-            "size": 17
-          },
-          "size": 17
-        }
-      },
-      "size": 235007
-    },
-    "size": 243952
-  }
-}
@@ -1,13 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.dev/license
- */
-
-import * as core from '../../../src/core';
-
-// We need to something with the "core" import in order to ensure
-// that all symbols from core are preserved in the bundle.
-console.error(core);
@@ -1,28 +1,22 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "cyclic_import",
+optimize_angular_app(
+    name = "bundles",
    srcs = [
-        "index.ts",
+        "main.ts",
        "trigger.ts",
    ],
-    interop_deps = [
-        "//packages/core",
-        "//packages/platform-browser",
-    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
    deps = [
-        ":cyclic_import",
-        "//packages/core",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -43,19 +37,7 @@ ts_project(
 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )
-
-http_server(
-    name = "devserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -1,438 +0,0 @@
-[
-  "ALLOW_MULTIPLE_PLATFORMS",
-  "APP_BOOTSTRAP_LISTENER",
-  "APP_ID",
-  "APP_INITIALIZER",
-  "AfterRenderManager",
-  "AnonymousSubject",
-  "ApplicationInitStatus",
-  "ApplicationModule",
-  "ApplicationRef",
-  "BINDING",
-  "BROWSER_MODULE_PROVIDERS",
-  "BehaviorSubject",
-  "BrowserDomAdapter",
-  "BrowserModule",
-  "BrowserXhr",
-  "CIRCULAR",
-  "COMPLETE_NOTIFICATION",
-  "COMPONENT_REGEX",
-  "CSP_NONCE",
-  "ChainedInjector",
-  "ChangeDetectionScheduler",
-  "ChangeDetectionSchedulerImpl",
-  "ChangeDetectionStrategy",
-  "CommonModule",
-  "ComponentFactory",
-  "ComponentFactory2",
-  "ComponentFactoryResolver",
-  "ComponentFactoryResolver2",
-  "ComponentRef",
-  "ComponentRef2",
-  "ConsumerObserver",
-  "DEFAULT_APP_ID",
-  "DOCUMENT",
-  "DOCUMENT2",
-  "DefaultDomRenderer2",
-  "DepComponent",
-  "DestroyRef",
-  "DomAdapter",
-  "DomEventsPlugin",
-  "DomRendererFactory2",
-  "EMPTY_ARRAY",
-  "EMPTY_OBJ",
-  "EMPTY_OBSERVER",
-  "EMPTY_PAYLOAD",
-  "EMPTY_SUBSCRIPTION",
-  "ENABLE_ROOT_COMPONENT_BOOTSTRAP",
-  "ENVIRONMENT_INITIALIZER",
-  "EVENT_MANAGER_PLUGINS",
-  "EffectScheduler",
-  "ElementRef",
-  "EmulatedEncapsulationDomRenderer2",
-  "EnvironmentInjector",
-  "EnvironmentNgModuleRefAdapter",
-  "ErrorHandler",
-  "EventEmitter",
-  "EventManager",
-  "EventManagerPlugin",
-  "INJECTOR",
-  "INJECTOR_DEF_TYPES",
-  "INJECTOR_SCOPE",
-  "INTERNAL_APPLICATION_ERROR_HANDLER",
-  "InjectionToken",
-  "Injector",
-  "InputFlags",
-  "KeyEventsPlugin",
-  "LOCALE_ID2",
-  "MODIFIER_KEYS",
-  "MODIFIER_KEY_GETTERS",
-  "Module",
-  "NAMESPACE_URIS",
-  "NEW_LINE",
-  "NG_COMP_DEF",
-  "NG_DIR_DEF",
-  "NG_ELEMENT_ID",
-  "NG_ENV_ID",
-  "NG_FACTORY_DEF",
-  "NG_INJ_DEF",
-  "NG_MOD_DEF",
-  "NG_PIPE_DEF",
-  "NG_PROV_DEF",
-  "NOT_FOUND",
-  "NOT_FOUND2",
-  "NOT_FOUND_CHECK_ONLY_ELEMENT_INJECTOR",
-  "NOT_YET",
-  "NO_CHANGE",
-  "NULL_INJECTOR",
-  "NgModuleFactory",
-  "NgModuleFactory2",
-  "NgModuleRef",
-  "NgModuleRef2",
-  "NgZone",
-  "NgZoneChangeDetectionScheduler",
-  "NodeInjector",
-  "NodeInjectorDestroyRef",
-  "NodeInjectorFactory",
-  "NoneEncapsulationDomRenderer",
-  "NoopNgZone",
-  "NotFoundError",
-  "NullInjector",
-  "ObjectUnsubscribedError",
-  "Observable",
-  "OperatorSubscriber",
-  "PLATFORM_DESTROY_LISTENERS",
-  "PLATFORM_ID",
-  "PLATFORM_INITIALIZER",
-  "PRESERVE_HOST_CONTENT",
-  "PendingTasksInternal",
-  "PlatformRef",
-  "R3Injector",
-  "REACTIVE_LVIEW_CONSUMER_NODE",
-  "REACTIVE_NODE",
-  "REMOVE_STYLES_ON_COMPONENT_DESTROY",
-  "RendererFactory2",
-  "RendererStyleFlags2",
-  "RetrievingInjector",
-  "RuntimeError",
-  "SCHEDULE_IN_ROOT_ZONE",
-  "SIGNAL",
-  "SIMPLE_CHANGES_STORE",
-  "SafeSubscriber",
-  "Sanitizer",
-  "ShadowDomRenderer",
-  "SharedStylesHost",
-  "SimpleChange",
-  "StandaloneService",
-  "Subject",
-  "Subscriber",
-  "Subscription",
-  "TEMPORARY_CONSUMER_NODE",
-  "TESTABILITY",
-  "TESTABILITY_GETTER",
-  "TESTABILITY_PROVIDERS",
-  "THROW_IF_NOT_FOUND",
-  "TRACKED_LVIEWS",
-  "Testability",
-  "TestabilityRegistry",
-  "TracingAction",
-  "TracingService",
-  "TriggerComponent",
-  "USE_VALUE",
-  "UnsubscriptionError",
-  "ViewEncapsulation",
-  "ViewRef",
-  "ZONELESS_ENABLED",
-  "ZONELESS_SCHEDULER_DISABLED",
-  "ZoneAwareEffectScheduler",
-  "ZoneStablePendingTask",
-  "_DOM",
-  "_Injector",
-  "_NullComponentFactoryResolver",
-  "__defProp",
-  "__forward_ref__",
-  "__publicField",
-  "_applyRootElementTransformImpl",
-  "_bind",
-  "_currentInjector",
-  "_global",
-  "_injectImplementation",
-  "_isRefreshingViews",
-  "_keyMap",
-  "_locateOrCreateElementNode",
-  "_moduleDoBootstrap",
-  "_platformInjector",
-  "_testabilityGetter",
-  "_wasLastNodeCreated",
-  "activeConsumer",
-  "addAfterRenderSequencesForView",
-  "allocExpando",
-  "allocLFrame",
-  "angularZoneInstanceIdProperty",
-  "appendChild",
-  "applyNodes",
-  "applyProjectionRecursive",
-  "applyToElementOrContainer",
-  "applyValueToInputField",
-  "applyView",
-  "arrRemove",
-  "assertConsumerNode",
-  "assertNotDestroyed",
-  "attachPatchData",
-  "baseElement",
-  "bind",
-  "bloomHasToken",
-  "bootstrap",
-  "callHook",
-  "callHookInternal",
-  "callHooks",
-  "checkStable",
-  "classIndexOf",
-  "cleanUpView",
-  "collectNativeNodes",
-  "collectNativeNodesInLContainer",
-  "computeStaticStyling",
-  "concatStringsWithSpace",
-  "config",
-  "configureViewWithDirective",
-  "consumerBeforeComputation",
-  "consumerDestroy",
-  "consumerIsLive",
-  "consumerPollProducersForChange",
-  "context",
-  "convertToBitFlags",
-  "createDirectivesInstances",
-  "createElementNode",
-  "createElementRef",
-  "createErrorClass",
-  "createInjector",
-  "createInjectorWithoutInjectorInstances",
-  "createLFrame",
-  "createLView",
-  "createLinkElement",
-  "createNodeInjector",
-  "createNotification",
-  "createPlatformFactory",
-  "createStyleElement",
-  "createTView",
-  "deepForEach",
-  "deepForEachProvider",
-  "detachMovedView",
-  "detachViewFromDOM",
-  "detectChangesInChildComponents",
-  "detectChangesInComponent",
-  "detectChangesInEmbeddedViews",
-  "detectChangesInView",
-  "detectChangesInViewIfAttached",
-  "detectChangesInternal",
-  "diPublicInInjector",
-  "elementEndFirstCreatePass",
-  "elementStartFirstCreatePass",
-  "enterDI",
-  "enterView",
-  "errorContext",
-  "execFinalizer",
-  "executeCheckHooks",
-  "executeContentQueries",
-  "executeInitAndCheckHooks",
-  "executeTemplate",
-  "executeViewQueryFn",
-  "extractDefListOrFactory",
-  "extractDirectiveDef",
-  "findAttrIndexInNode",
-  "findDirectiveDefMatches",
-  "forEachSingleProvider",
-  "forwardRef",
-  "freeConsumers",
-  "getClosureSafeProperty",
-  "getComponentDef",
-  "getComponentLViewByIndex",
-  "getConstant",
-  "getCurrentInjector",
-  "getCurrentTNode",
-  "getCurrentTNodePlaceholderOk",
-  "getDOM",
-  "getDeclarationTNode",
-  "getDirectiveDef",
-  "getFactoryDef",
-  "getFirstLContainer",
-  "getInitialLViewFlagsFromDef",
-  "getInjectImplementation",
-  "getInjectableDef",
-  "getInjectorDef",
-  "getInjectorIndex",
-  "getLView",
-  "getLViewParent",
-  "getNativeByTNode",
-  "getNearestLContainer",
-  "getNextLContainer",
-  "getNgZoneOptions",
-  "getNodeInjectable",
-  "getNullInjector",
-  "getOrCreateInjectable",
-  "getOrCreateNodeInjectorForNode",
-  "getOrCreateTNode",
-  "getParentInjectorIndex",
-  "getParentInjectorLocation",
-  "getParentInjectorView",
-  "getPipeDef",
-  "getPlatform",
-  "getProjectionNodes",
-  "getPromiseCtor",
-  "getSimpleChangesStore",
-  "getTNodeFromLView",
-  "getTView",
-  "handleStoppedNotification",
-  "handleUnhandledError",
-  "hasApplyArgsData",
-  "hasTagAndTypeMatch",
-  "icuContainerIterate",
-  "identity",
-  "importProvidersFrom",
-  "includeViewProviders",
-  "incrementInitPhaseFlags",
-  "inject",
-  "injectArgs",
-  "injectDestroyRef",
-  "injectElementRef",
-  "injectInjectorOnly",
-  "injectRootLimpMode",
-  "injectableDefOrInjectorDefFactory",
-  "insertBloom",
-  "instructionState",
-  "internalImportProvidersFrom",
-  "internalProvideZoneChangeDetection",
-  "invokeHostBindingsInCreationMode",
-  "isAngularZoneProperty",
-  "isApplicationBootstrapConfig",
-  "isComponentDef",
-  "isComponentHost",
-  "isContentQueryHost",
-  "isCssClassMatching",
-  "isCurrentTNodeParent",
-  "isDestroyed",
-  "isDetachedByI18n",
-  "isEnvironmentProviders",
-  "isFunction",
-  "isInlineTemplate",
-  "isInputBinding",
-  "isLContainer",
-  "isLView",
-  "isNodeMatchingSelector",
-  "isNodeMatchingSelectorList",
-  "isNotFound",
-  "isPlatformServer",
-  "isPositive",
-  "isPromise",
-  "isRefreshingViews",
-  "isRootView",
-  "isSubscription",
-  "isTemplateNode",
-  "isTypeProvider",
-  "isValueProvider",
-  "lastNodeWasCreated",
-  "leaveDI",
-  "leaveView",
-  "leaveViewLight",
-  "lookupTokenUsingModuleInjector",
-  "lookupTokenUsingNodeInjector",
-  "makeRecord",
-  "map",
-  "markAncestorsForTraversal",
-  "markAsComponentHost",
-  "markViewDirty",
-  "markViewForRefresh",
-  "markedFeatures",
-  "maybeWrapInNotSelector",
-  "mergeHostAttribute",
-  "mergeHostAttrs",
-  "moduleBootstrapImpl",
-  "nativeAppendChild",
-  "nativeAppendOrInsertBefore",
-  "nativeInsertBefore",
-  "nextNgElementId",
-  "ngOnChangesSetInput",
-  "ngZoneInstanceId",
-  "noSideEffects",
-  "nonNull",
-  "noop",
-  "noop2",
-  "notFoundValueOrThrow",
-  "observable",
-  "onEnter",
-  "onLeave",
-  "optionsReducer",
-  "parseAndConvertInputsForDefinition",
-  "parseAndConvertOutputsForDefinition",
-  "platformBrowser",
-  "platformCore",
-  "processInjectorTypesWithProviders",
-  "producerMarkClean",
-  "producerRemoveLiveConsumerAtIndex",
-  "producerUpdateValueVersion",
-  "profiler",
-  "profilerCallbacks",
-  "refreshContentQueries",
-  "refreshView",
-  "rememberChangeHistoryAndInvokeOnChangesHook",
-  "remove",
-  "removeElements",
-  "removeFromArray",
-  "renderComponent",
-  "renderView",
-  "requiresRefreshOrTraversal",
-  "resetPreOrderHookFlags",
-  "resolveForwardRef",
-  "runEffectsInView",
-  "runInInjectionContext",
-  "saveNameToExportMap",
-  "scheduleCallbackWithMicrotask",
-  "scheduleCallbackWithRafRace",
-  "searchTokensOnInjector",
-  "setActiveConsumer",
-  "setAllInputsForProperty",
-  "setBindingRootForHostBindings",
-  "setCurrentDirectiveIndex",
-  "setCurrentInjector",
-  "setCurrentQueryIndex",
-  "setCurrentTNode",
-  "setDirectiveInputsWhichShadowsStyling",
-  "setIncludeViewProviders",
-  "setInjectImplementation",
-  "setInputsFromAttrs",
-  "setIsRefreshingViews",
-  "setModuleBootstrapImpl",
-  "setSelectedIndex",
-  "setShadowStylingInputFlags",
-  "setupHostDirectiveInputsOrOutputs",
-  "setupInitialInputs",
-  "setupSelectorMatchedInputsOrOutputs",
-  "setupStaticAttributes",
-  "shimStylesContent",
-  "shouldSearchParent",
-  "storeLViewOnDestroy",
-  "stringify",
-  "stringifyCSSSelector",
-  "throwCyclicDependencyError",
-  "throwProviderNotFoundError",
-  "timeoutProvider",
-  "uniqueIdCounter",
-  "unregisterLView",
-  "unwrapRNode",
-  "updateAncestorTraversalFlagsOnAttach",
-  "updateMicroTaskStatus",
-  "viewAttachedToChangeDetector",
-  "viewShouldHaveReactiveConsumer",
-  "walkProviderTree",
-  "wasLastNodeCreated",
-  "writeToDirectiveInput",
-  "ɵɵdefineComponent",
-  "ɵɵdefineInjectable",
-  "ɵɵdefineInjector",
-  "ɵɵdefineNgModule",
-  "ɵɵdirectiveInject",
-  "ɵɵelement",
-  "ɵɵelementEnd",
-  "ɵɵelementStart",
-  "ɵɵinject"
-]
@@ -1,34 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-
-<head>
-  <title>Angular Cyclic Import Example</title>
-</head>
-
-<body>
-  <!-- The Angular application will be bootstrapped into this element. -->
-  <trigger></trigger>
-
-  <!--
-      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>
-</body>
-
-</html>
@@ -9,15 +9,15 @@
 import '@angular/compiler';

 import {withBody} from '@angular/private/testing';
-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';
-
-const PACKAGE = 'angular/packages/core/test/bundling/cyclic_import';
+import * as url from 'url';

 describe('treeshaking with uglify', () => {
  let content: string;
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve('packages/core/test/bundling/cyclic_import/bundles/main.js');
+  const bundleUrl = url.pathToFileURL(contentPath).toString();
+
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });
@@ -26,25 +26,7 @@ describe('treeshaking with uglify', () => {
    it(
      'should render hello world when not minified',
      withBody('<trigger></trigger>', async () => {
-        await import(path.join(PACKAGE, 'bundle.js'));
-        await (window as any).appReady;
-        expect(document.body.textContent).toEqual('dep');
-      }),
-    );
-
-    it(
-      'should render hello world when debug minified',
-      withBody('<trigger></trigger>', async () => {
-        await import(path.join(PACKAGE, 'bundle.debug.min.js'));
-        await (window as any).appReady;
-        expect(document.body.textContent).toEqual('dep');
-      }),
-    );
-
-    it(
-      'should render hello world when fully minified',
-      withBody('<trigger></trigger>', async () => {
-        await import(path.join(PACKAGE, 'bundle.min.js'));
+        await import(bundleUrl);
        await (window as any).appReady;
        expect(document.body.textContent).toEqual('dep');
      }),
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ApplicationRef, Component, NgModule} from '../../../src/core';
+import {ApplicationRef, Component, NgModule} from '@angular/core';
 import {BrowserModule, platformBrowser} from '@angular/platform-browser';

 import {TriggerComponent} from './trigger';
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Component} from '../../../src/core';
+import {Component} from '@angular/core';

@Component({
  selector: 'trigger',
@@ -1,30 +1,26 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "defer",
+optimize_angular_app(
+    name = "bundles",
    srcs = [
        "defer.component.ts",
-        "index.ts",
+        "main.ts",
    ],
-    interop_deps = [
-        "//packages/core",
-        "//packages/platform-browser",
-    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":defer",
-        "//packages/core",
-        "//packages/platform-browser",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -45,25 +41,13 @@ ts_project(
 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "devserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Component} from '../../../src/core';
+import {Component} from '@angular/core';

@Component({
  standalone: true,
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <title>Defer Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-    <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>
-  </body>
-</html>
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Component} from '../../../src/core';
+import {Component, provideZonelessChangeDetection} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';

 import {DeferComponent} from './defer.component';
@@ -33,4 +33,4 @@ export class AppComponent {
  isVisible = true;
 }

-bootstrapApplication(AppComponent);
+bootstrapApplication(AppComponent, {providers: [provideZonelessChangeDetection()]});
@@ -8,25 +8,16 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/defer';
-
 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve('packages/core/test/bundling/defer/bundles/main.js');
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -1,29 +1,26 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "forms_reactive",
-    srcs = ["index.ts"],
-    interop_deps = [
-        "//packages/core",
-        "//packages/forms",
-        "//packages/platform-browser",
+optimize_angular_app(
+    name = "bundles",
+    srcs = [
+        "main.ts",
    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":forms_reactive",
-        "//packages/core",
-        "//packages/forms",
-        "//packages/platform-browser",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/forms",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -37,33 +34,16 @@ ts_project(
        "//packages/core/testing",
        "//packages/private/testing",
    ],
-    deps = [
-        "//:node_modules/@bazel/runfiles",
-    ],
 )

 jasmine_node_test(
    name = "test",
-    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
-    ],
+    data = [":bundles"],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "prodserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -10,43 +10,39 @@ import '@angular/compiler';

 import {withBody} from '@angular/private/testing';
 import * as path from 'path';
+import * as url from 'url';

-const PACKAGE = 'angular/packages/core/test/bundling/forms_reactive';
-const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
+const BUNDLE = path.resolve('packages/core/test/bundling/forms_reactive/bundles/main.js');

 describe('functional test for reactive forms', () => {
-  BUNDLES.forEach((bundle) => {
-    describe(`using ${bundle} bundle`, () => {
-      it(
-        'should render template form',
-        withBody('<app-root></app-root>', async () => {
-          // load the bundle
-          await import(path.join(PACKAGE, bundle));
-          // the bundle attaches the following fields to the `window` global.
-          const {bootstrapApp} = window as any;
+  it(
+    'should render template form',
+    withBody('<app-root></app-root>', async () => {
+      // load the bundle
+      await import(url.pathToFileURL(BUNDLE).toString());
+      // the bundle attaches the following fields to the `window` global.
+      const {bootstrapApp} = window as any;

-          await bootstrapApp();
+      await bootstrapApp();

-          // Reactive forms
-          const reactiveFormsComponent = (window as any).reactiveFormsComponent;
-          const reactiveForm = document.querySelector('app-reactive-forms')!;
+      // Reactive forms
+      const reactiveFormsComponent = (window as any).reactiveFormsComponent;
+      const reactiveForm = document.querySelector('app-reactive-forms')!;

-          // Check for inputs
-          const inputs = reactiveForm.querySelectorAll('input');
-          expect(inputs.length).toBe(5);
+      // Check for inputs
+      const inputs = reactiveForm.querySelectorAll('input');
+      expect(inputs.length).toBe(5);

-          // Check for button
-          const reactiveButtons = reactiveForm.querySelectorAll('button');
-          expect(reactiveButtons.length).toBe(1);
-          expect(reactiveButtons[0]).toBeDefined();
+      // Check for button
+      const reactiveButtons = reactiveForm.querySelectorAll('button');
+      expect(reactiveButtons.length).toBe(1);
+      expect(reactiveButtons[0]).toBeDefined();

-          // Make sure button click works
-          const reactiveFormSpy = spyOn(reactiveFormsComponent, 'addCity').and.callThrough();
-          reactiveButtons[0].click();
-          expect(reactiveFormSpy).toHaveBeenCalled();
-          expect(reactiveFormsComponent.addresses.length).toBe(2);
-        }),
-      );
-    });
-  });
+      // Make sure button click works
+      const reactiveFormSpy = spyOn(reactiveFormsComponent, 'addCity').and.callThrough();
+      reactiveButtons[0].click();
+      expect(reactiveFormSpy).toHaveBeenCalled();
+      expect(reactiveFormsComponent.addresses.length).toBe(2);
+    }),
+  );
 });
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <title>Angular Reactive Forms Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-
-    <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>
-  </body>
-</html>
@@ -5,7 +5,7 @@
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */
-import {Component, NgModule} from '../../../src/core';
+import {Component, NgModule} from '@angular/core';
 import {
  FormArray,
  FormBuilder,
@@ -8,25 +8,16 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/forms_reactive';
-
 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve('packages/core/test/bundling/forms_reactive/bundles/main.js');
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -1,29 +1,26 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "forms_template_driven",
-    srcs = ["index.ts"],
-    interop_deps = [
-        "//packages/core",
-        "//packages/forms",
-        "//packages/platform-browser",
+optimize_angular_app(
+    name = "bundles",
+    srcs = [
+        "main.ts",
    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":forms_template_driven",
-        "//packages/core",
-        "//packages/forms",
-        "//packages/platform-browser",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/forms",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -37,33 +34,18 @@ ts_project(
        "//packages/core/testing",
        "//packages/private/testing",
    ],
-    deps = [
-        "//:node_modules/@bazel/runfiles",
-    ],
 )

 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "prodserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -11,41 +11,36 @@ import '@angular/compiler';
 import {withBody} from '@angular/private/testing';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/forms_template_driven';
-const BUNDLES = ['bundle.js', 'bundle.debug.min.js', 'bundle.min.js'];
+const BUNDLE = 'angular/packages/core/test/bundling/forms_template_driven/bundles/main.js';

 describe('functional test for forms', () => {
-  BUNDLES.forEach((bundle) => {
-    describe(`using ${bundle} bundle`, () => {
-      it(
-        'should render template form',
-        withBody('<app-root></app-root>', async () => {
-          // load the bundle
-          await import(path.join(PACKAGE, bundle));
-          // the bundle attaches the following fields to the `window` global.
-          const {bootstrapApp} = window as any;
+  it(
+    'should render template form',
+    withBody('<app-root></app-root>', async () => {
+      // load the bundle
+      await import(BUNDLE);
+      // the bundle attaches the following fields to the `window` global.
+      const {bootstrapApp} = window as any;

-          await bootstrapApp();
+      await bootstrapApp();

-          // Template forms
-          const templateFormsComponent = (window as any).templateFormsComponent;
-          const templateForm = document.querySelector('app-template-forms')!;
+      // Template forms
+      const templateFormsComponent = (window as any).templateFormsComponent;
+      const templateForm = document.querySelector('app-template-forms')!;

-          // Check for inputs
-          const iputs = templateForm.querySelectorAll('input');
-          expect(iputs.length).toBe(5);
+      // Check for inputs
+      const iputs = templateForm.querySelectorAll('input');
+      expect(iputs.length).toBe(5);

-          // Check for button
-          const templateButtons = templateForm.querySelectorAll('button');
-          expect(templateButtons.length).toBe(1);
-          expect(templateButtons[0]).toBeDefined();
+      // Check for button
+      const templateButtons = templateForm.querySelectorAll('button');
+      expect(templateButtons.length).toBe(1);
+      expect(templateButtons[0]).toBeDefined();

-          // Make sure button click works
-          const templateFormSpy = spyOn(templateFormsComponent, 'addCity');
-          templateButtons[0].click();
-          expect(templateFormSpy).toHaveBeenCalled();
-        }),
-      );
-    });
-  });
+      // Make sure button click works
+      const templateFormSpy = spyOn(templateFormsComponent, 'addCity');
+      templateButtons[0].click();
+      expect(templateFormSpy).toHaveBeenCalled();
+    }),
+  );
 });
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <title>Angular Template-driven Forms Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-
-    <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>
-  </body>
-</html>
@@ -5,7 +5,7 @@
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.dev/license
 */
-import {Component, NgModule} from '../../../src/core';
+import {Component, NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {BrowserModule, platformBrowser} from '@angular/platform-browser';

@@ -8,25 +8,18 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/forms_template_driven';
-
 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve(
+    'packages/core/test/bundling/forms_template_driven/bundles/main.js',
+  );
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -1,27 +1,25 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "hydration",
-    srcs = ["index.ts"],
-    interop_deps = [
-        "//packages/core",
-        "//packages/platform-browser",
+optimize_angular_app(
+    name = "bundles",
+    srcs = [
+        "main.ts",
    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":hydration",
-        "//packages/core",
-        "//packages/platform-browser",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -42,25 +40,13 @@ ts_project(
 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "prodserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <title>Angular Hello World Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-    <hello-world></hello-world>
-
-    <!--
-      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>
-  </body>
-</html>
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Component} from '../../../src/core';
+import {Component} from '@angular/core';
 import {bootstrapApplication, provideClientHydration} from '@angular/platform-browser';

@Component({
@@ -8,25 +8,18 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/hydration';
+const PACKAGE = 'angular/';

 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve('packages/core/test/bundling/hydration/bundles/main.js');
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -0,0 +1,11 @@
+{
+  "dependencies": {
+    "@angular/animations": "workspace:*",
+    "@angular/build": "20.0.0-rc.1",
+    "@angular/common": "workspace:*",
+    "@angular/core": "workspace:*",
+    "@angular/forms": "workspace:*",
+    "@angular/router": "workspace:*",
+    "@angular/platform-browser": "workspace:*"
+  }
+}
@@ -1,30 +1,26 @@
-load("//tools:defaults.bzl", "app_bundle", "http_server", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "router",
+optimize_angular_app(
+    name = "bundles",
    srcs = [
-        "index.ts",
+        "main.ts",
    ],
-    interop_deps = [
-        "//packages/core",
-        "//packages/platform-browser",
-        "//packages/router",
-    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":router",
-        "//packages/core",
-        "//packages/platform-browser",
-        "//packages/router",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
+        "//packages/core/test/bundling:node_modules/@angular/router",
    ],
 )

@@ -46,27 +42,13 @@ ts_project(
 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "server",
-    srcs = [
-        "index.html",
-    ],
-    deps = [
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-        "//packages/zone.js/bundles:zone.umd.js",
-    ],
-)
@@ -1,36 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <title>Angular Routing Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-
-    <app-root></app-root>
-
-    <script src="/angular/packages/zone.js/bundles/zone.umd.js"></script>
-    <!--
-      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>
-  </body>
-</html>
@@ -7,7 +7,7 @@
 */

 import {APP_BASE_HREF} from '@angular/common';
-import {Component, OnInit} from '../../../src/core';
+import {Component, OnInit, provideZonelessChangeDetection} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';
 import {
  ActivatedRoute,
@@ -74,5 +74,9 @@ const ROUTES: Routes = [
 ];

 (window as any).waitForApp = bootstrapApplication(RootComponent, {
-  providers: [provideRouter(ROUTES), {provide: APP_BASE_HREF, useValue: ''}],
+  providers: [
+    provideZonelessChangeDetection(),
+    provideRouter(ROUTES),
+    {provide: APP_BASE_HREF, useValue: ''},
+  ],
 });
@@ -8,25 +8,16 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/router';
-
 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve('packages/core/test/bundling/router/bundles/main.js');
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -1,27 +1,25 @@
-load("@npm//http-server:index.bzl", "http_server")
-load("//tools:defaults.bzl", "app_bundle", "jasmine_node_test")
-load("//tools:defaults2.bzl", "ng_project", "ts_project")
+load("@rules_angular//src/optimization:index.bzl", "optimize_angular_app")
+load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults2.bzl", "ts_project")
 load("//tools/symbol-extractor:index.bzl", "js_expected_symbol_test")

 package(default_visibility = ["//visibility:public"])

-ng_project(
-    name = "standalone_bootstrap",
-    srcs = ["index.ts"],
-    interop_deps = [
-        "//packages/core",
-        "//packages/platform-browser",
+optimize_angular_app(
+    name = "bundles",
+    srcs = [
+        "main.ts",
    ],
-)
-
-app_bundle(
-    name = "bundle",
-    entry_point = ":index.ts",
+    env = {
+        "NG_BUILD_MANGLE": "0",
+    },
    deps = [
-        ":standalone_bootstrap",
-        "//packages/core",
-        "//packages/platform-browser",
-        "@npm//rxjs",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//packages/core/test/bundling:node_modules/@angular/build",
+        "//packages/core/test/bundling:node_modules/@angular/common",
+        "//packages/core/test/bundling:node_modules/@angular/core",
+        "//packages/core/test/bundling:node_modules/@angular/platform-browser",
    ],
 )

@@ -34,33 +32,18 @@ ts_project(
        "//packages/core/testing",
        "//packages/private/testing",
    ],
-    deps = [
-        "//:node_modules/@bazel/runfiles",
-    ],
 )

 jasmine_node_test(
    name = "test",
    data = [
-        ":bundle.debug.min.js",
-        ":bundle.js",
-        ":bundle.min.js",
-        ":bundle.min.js.br",
+        ":bundles",
    ],
    deps = [":test_lib"],
 )

 js_expected_symbol_test(
    name = "symbol_test",
-    src = ":bundle.debug.min.js",
+    bundles_dir = ":bundles",
    golden = ":bundle.golden_symbols.json",
 )
-
-http_server(
-    name = "devserver",
-    data = [
-        "index.html",
-        ":bundle.debug.min.js",
-        ":bundle.min.js",
-    ],
-)
@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-
-<html>
-  <head>
-    <title>Angular Hello World Example</title>
-  </head>
-  <body>
-    <!-- The Angular application will be bootstrapped into this element. -->
-    <hello-world></hello-world>
-
-    <!--
-      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>
-  </body>
-</html>
@@ -6,14 +6,14 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Component} from '../../../src/core';
+import {Component, provideZonelessChangeDetection} from '@angular/core';
 import {bootstrapApplication} from '@angular/platform-browser';

@Component({
  standalone: true,
-  selector: 'hello-world',
+  selector: 'app-root',
  template: 'Hello World!',
 })
 class HelloWorld {}

-bootstrapApplication(HelloWorld);
+bootstrapApplication(HelloWorld, {providers: [provideZonelessChangeDetection()]});
@@ -8,25 +8,18 @@

 import '@angular/compiler';

-import {runfiles} from '@bazel/runfiles';
 import * as fs from 'fs';
 import * as path from 'path';

-const PACKAGE = 'angular/packages/core/test/bundling/standalone_bootstrap';
-
 describe('treeshaking with uglify', () => {
  let content: string;
-  // We use the debug version as otherwise symbols/identifiers would be mangled (and the test would
-  // always pass)
-  const contentPath = runfiles.resolve(path.join(PACKAGE, 'bundle.debug.min.js'));
+  const contentPath = path.resolve(
+    'packages/core/test/bundling/standalone_bootstrap/bundles/main.js',
+  );
  beforeAll(() => {
    content = fs.readFileSync(contentPath, {encoding: 'utf-8'});
  });

-  it('should drop unused TypeScript helpers', () => {
-    expect(content).not.toContain('__asyncGenerator');
-  });
-
  it('should not contain rxjs from commonjs distro', () => {
    expect(content).not.toContain('commonjsGlobal');
    expect(content).not.toContain('createCommonjsModule');
@@ -1,5 +1,5 @@
 load("//tools:defaults.bzl", "api_golden_test", "api_golden_test_npm_package", "generate_api_docs", "ng_package")
-load("//tools:defaults2.bzl", "ng_project")
+load("//tools:defaults2.bzl", "ng_project", "npm_package")

 package(default_visibility = ["//visibility:public"])

@@ -42,6 +42,16 @@ ng_package(
    ],
 )

+# TODO(devversion): Temporary early `npm_package` for making this package usable in `core/test/bundling`.
+# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
+npm_package(
+    name = "pkg",
+    srcs = [":npm_package"],
+    replace_prefixes = {
+        "npm_package/": "",
+    },
+)
+
 api_golden_test_npm_package(
    name = "forms_api",
    data = [
@@ -1,5 +1,5 @@
 load("//tools:defaults.bzl", "api_golden_test", "api_golden_test_npm_package", "generate_api_docs", "ng_package", "tsec_test")
-load("//tools:defaults2.bzl", "ng_project")
+load("//tools:defaults2.bzl", "ng_project", "npm_package")

 package(default_visibility = ["//visibility:public"])

@@ -55,6 +55,16 @@ ng_package(
    ],
 )

+# TODO(devversion): Temporary early `npm_package` for making this package usable in `core/test/bundling`.
+# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
+npm_package(
+    name = "pkg",
+    srcs = [":npm_package"],
+    replace_prefixes = {
+        "npm_package/": "",
+    },
+)
+
 api_golden_test_npm_package(
    name = "platform-browser_api",
    data = [
@@ -1,5 +1,5 @@
 load("//tools:defaults.bzl", "api_golden_test", "api_golden_test_npm_package", "generate_api_docs", "ng_package")
-load("//tools:defaults2.bzl", "ng_project")
+load("//tools:defaults2.bzl", "ng_project", "npm_package")

 package(default_visibility = ["//visibility:public"])

@@ -48,6 +48,16 @@ ng_package(
    ],
 )

+# TODO(devversion): Temporary early `npm_package` for making this package usable in `core/test/bundling`.
+# Long-term, `pkg_npm` will be migrated to `npm_package` in general.
+npm_package(
+    name = "pkg",
+    srcs = [":npm_package"],
+    replace_prefixes = {
+        "npm_package/": "",
+    },
+)
+
 api_golden_test_npm_package(
    name = "router_api",
    data = [
@@ -1,6 +1,13 @@
 packages:
  - .
  - adev/shared-docs/pipeline/api-gen
-  - packages/compiler/
+  - packages/animations/
+  - packages/common/
  - packages/compiler-cli/
+  - packages/compiler/
+  - packages/core/
+  - packages/core/test/bundling
+  - packages/forms/
+  - packages/platform-browser/
+  - packages/router/
  - tools/bazel/rules_angular_store/