build: migrate adev devtools package to use ts_project (#61221)

Migrate usages to ts_project PR Close #61221
2026-09-14 13:54:52 +08:00 · 2025-05-08 13:20:37 +00:00
parent 5f46be03b5
commit a5002fd69a
138 changed files with 480 additions and 450 deletions
@@ -1,4 +1,4 @@
-load("//tools:defaults.bzl", "ts_config")
+load("@aspect_rules_ts//ts:defs.bzl", rules_js_tsconfig = "ts_config")

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

@@ -7,10 +7,15 @@ exports_files([
    "cypress.json",
 ])

-ts_config(
-    name = "tsconfig_spec",
-    src = "tsconfig.spec.json",
+rules_js_tsconfig(
+    name = "tsconfig_build",
+    src = "tsconfig.json",
+)
+
+rules_js_tsconfig(
+    name = "tsconfig_test",
+    src = "tsconfig-test.json",
    deps = [
-        "//devtools:tsconfig.json",
+        ":tsconfig_build",
    ],
 )
@@ -23,7 +23,7 @@ import {
 } from '@angular/core';
 import {createCustomElement} from '@angular/elements';
 import {RouterOutlet} from '@angular/router';
-import {initializeMessageBus} from 'ng-devtools-backend';
+import {initializeMessageBus} from '../../../../ng-devtools-backend';

 import {ZoneUnawareIFrameMessageBus} from '../../../../../src/zone-unaware-iframe-message-bus';

@@ -7,10 +7,10 @@
 */

 import {Component, ElementRef, ViewChild} from '@angular/core';
-import {Events, MessageBus, PriorityAwareMessageBus} from 'protocol';
+import {Events, MessageBus, PriorityAwareMessageBus} from '../../../../protocol';

 import {IFrameMessageBus} from '../../../../../src/iframe-message-bus';
-import {DevToolsComponent} from 'ng-devtools';
+import {DevToolsComponent} from '../../../../ng-devtools';
 import {FrameManager} from '../../../../../projects/ng-devtools/src/lib/application-services/frame_manager';

@Component({
@@ -9,7 +9,7 @@
 import {bootstrapApplication} from '@angular/platform-browser';
 import {provideAnimations} from '@angular/platform-browser/animations';
 import {provideRouter} from '@angular/router';
-import {ApplicationEnvironment, ApplicationOperations} from 'ng-devtools';
+import {ApplicationEnvironment, ApplicationOperations} from '../../ng-devtools';

 import {DemoApplicationEnvironment} from '../../../src/demo-application-environment';
 import {DemoApplicationOperations} from '../../../src/demo-application-operations';
@@ -1,18 +1,11 @@
-load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
 load("//devtools/tools:typescript.bzl", "ts_library")

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

 ts_library(
-    name = "ng_devtools_backend_ts",
+    name = "ng-devtools-backend",
    srcs = ["index.ts"],
    deps = [
-        "//devtools/projects/ng-devtools-backend/src",
+        "//devtools/projects/ng-devtools-backend/src:src_rjs",
    ],
 )
-
-js_library(
-    name = "ng-devtools-backend",
-    package_name = "ng-devtools-backend",
-    deps = [":ng_devtools_backend_ts"],
-)
@@ -6,7 +6,7 @@ ts_library(
    name = "src",
    srcs = ["public-api.ts"],
    deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib",
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
+        "//devtools/projects/ng-devtools-backend/src/lib:component_tree_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:lib_rjs",
    ],
 )
@@ -6,21 +6,23 @@ package(default_visibility = ["//visibility:public"])
 ts_library(
    name = "lib",
    srcs = ["index.ts"],
-    deps = [
-        ":client_event_subscribers",
-        "//devtools/projects/ng-devtools-backend/src/lib/component-inspector",
-        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks",
+    interop_deps = [
        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
-        "//devtools/projects/protocol",
+    ],
+    deps = [
+        ":client_event_subscribers_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-inspector:component-inspector_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest:directive-forest_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks:hooks_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

 karma_web_test_suite(
    name = "highlighter_test",
    deps = [
-        ":highlighter_test_lib",
+        ":highlighter_test_lib_rjs",
    ],
 )

@@ -29,19 +31,23 @@ ts_test_library(
    srcs = [
        "highlighter.spec.ts",
    ],
-    deps = [
-        ":highlighter",
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
+    ],
+    deps = [
+        ":highlighter_rjs",
    ],
 )

 ts_library(
    name = "highlighter",
    srcs = ["highlighter.ts"],
-    deps = [
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+    ],
+    deps = [
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -49,7 +55,7 @@ ts_library(
    name = "interfaces",
    srcs = ["interfaces.ts"],
    deps = [
-        "//devtools/projects/protocol",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -65,31 +71,34 @@ ts_test_library(
    srcs = [
        "router-tree.spec.ts",
    ],
-    deps = [
-        ":router_tree",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
        "//packages/router",
-        "@npm//@types",
+    ],
+    deps = [
+        ":router_tree_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

 ts_library(
    name = "router_tree",
    srcs = ["router-tree.ts"],
-    deps = [
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/router",
    ],
+    deps = [
+        "//devtools/projects/protocol:protocol_rjs",
+    ],
 )

 ts_library(
    name = "set_console_reference",
    srcs = ["set-console-reference.ts"],
    deps = [
-        ":interfaces",
-        "//devtools/projects/protocol",
-        "//devtools/projects/shared-utils",
+        ":interfaces_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+        "//devtools/projects/shared-utils:shared-utils_rjs",
    ],
 )

@@ -116,44 +125,46 @@ ts_test_library(
        "client-event-subscribers.spec.ts",
    ],
    deps = [
-        ":client_event_subscribers",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks",
-        "//devtools/projects/protocol",
-        "//devtools/projects/shared-utils",
-        "@npm//rxjs",
+        ":client_event_subscribers_rjs",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks:hooks_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+        "//devtools/projects/shared-utils:shared-utils_rjs",
    ],
 )

 ts_library(
    name = "client_event_subscribers",
    srcs = ["client-event-subscribers.ts"],
+    interop_deps = [
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api:ng-debug-api",
+    ],
    deps = [
-        ":component_tree",
-        ":highlighter",
-        ":interfaces",
-        ":router_tree",
-        ":set_console_reference",
-        ":utils",
-        "//devtools/projects/ng-devtools-backend/src/lib/component-inspector",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks",
-        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+        ":component_tree_rjs",
+        ":highlighter_rjs",
+        ":interfaces_rjs",
+        ":router_tree_rjs",
+        ":set_console_reference_rjs",
+        ":utils_rjs",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-inspector:component-inspector_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks:hooks_rjs",
        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
-        "//devtools/projects/protocol",
-        "//devtools/projects/shared-utils",
-        "@npm//rxjs",
    ],
 )

 ts_library(
    name = "component_tree",
    srcs = ["component-tree.ts"],
+    interop_deps = [
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
+    ],
    deps = [
        ":interfaces",
        ":utils",
-        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
-        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
-        "//devtools/projects/ng-devtools-backend/src/lib/state-serializer",
-        "//devtools/projects/protocol",
+        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest:directive-forest_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
        "//packages/core",
    ],
 )
@@ -162,7 +173,7 @@ ts_test_library(
    name = "component_tree_test_lib",
    srcs = ["component-tree.spec.ts"],
    deps = [
-        ":component_tree",
+        ":component_tree_rjs",
        "//packages/core",
        "@npm//jasmine",
    ],
@@ -6,9 +6,9 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Events, MessageBus} from 'protocol';
+import {Events, MessageBus} from '../../../protocol';
 import {subscribeToClientEvents} from './client-event-subscribers';
-import {appIsAngular, appIsAngularIvy, appIsSupportedAngularVersion} from 'shared-utils';
+import {appIsAngular, appIsAngularIvy, appIsSupportedAngularVersion} from '../../../shared-utils';
 import {DirectiveForestHooks} from './hooks/hooks';
 import {of} from 'rxjs';

@@ -19,7 +19,7 @@ import {
  Route,
  SerializedInjector,
  SerializedProviderRecord,
-} from 'protocol';
+} from '../../../protocol';
 import {debounceTime} from 'rxjs/operators';
 import {
  appIsAngularInDevMode,
@@ -27,7 +27,7 @@ import {
  appIsSupportedAngularVersion,
  getAngularVersion,
  isHydrationEnabled,
-} from 'shared-utils';
+} from '../../../shared-utils';

 import {ComponentInspector} from './component-inspector/component-inspector';
 import {
@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")

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

@@ -7,11 +7,11 @@ ts_library(
    name = "component-inspector",
    srcs = ["component-inspector.ts"],
    deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
-        "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
-        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks",
-        "//devtools/projects/protocol",
+        "//devtools/projects/ng-devtools-backend/src/lib:component_tree_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:highlighter_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks:hooks_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -25,15 +25,16 @@ ts_test_library(
    srcs = [
        "component-inspector.spec.ts",
    ],
-    deps = [
-        ":component-inspector",
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
-        "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
-        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
+    ],
+    deps = [
+        ":component-inspector_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:component_tree_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:highlighter_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:utils_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks:hooks_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ElementPosition, HydrationStatus} from 'protocol';
+import {ElementPosition, HydrationStatus} from '../../../../protocol';

 import {findNodeInForest} from '../component-tree';
 import {
@@ -15,7 +15,7 @@ import {
  SerializedInjector,
  SerializedProviderRecord,
  UpdatedStateData,
-} from 'protocol';
+} from '../../../protocol';

 import {buildDirectiveTree, getLViewFromDirectiveOrElementInstance} from './directive-forest/index';
 import {
@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")

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

@@ -9,15 +9,17 @@ ts_library(
        include = ["*.ts"],
        exclude = ["*.spec.ts"],
    ),
-    deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
-        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
-        "//devtools/projects/ng-devtools-backend/src/lib:version",
-        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//semver-dsl",
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+    ],
+    deps = [
+        "//:node_modules/semver-dsl",
+        "//devtools/projects/ng-devtools-backend/src/lib:highlighter_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:utils_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:version_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -33,10 +35,12 @@ ts_test_library(
    srcs = [
        "render-tree.spec.ts",
    ],
+    interop_deps = [
+        "//packages/core",
+    ],
    deps = [
-        ":directive-forest",
-        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
-        "@npm//@types",
+        ":directive-forest_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:utils_rjs",
    ],
 )
@@ -7,7 +7,7 @@
 */

 import {ɵHydratedNode as HydrationNode} from '@angular/core';
-import {HydrationStatus} from 'protocol';
+import {HydrationStatus} from '../../../../protocol';

 import {ComponentTreeNode} from '../interfaces';
 import {ngDebugClient} from '../ng-debug-api/ng-debug-api';
@@ -7,7 +7,7 @@
 */

 import type {ɵGlobalDevModeUtils as GlobalDevModeUtils, Type} from '@angular/core';
-import {HydrationStatus} from 'protocol';
+import {HydrationStatus} from '../../../protocol';

 let hydrationOverlayItems: HTMLElement[] = [];
 let selectedElementOverlay: HTMLElement | null = null;
@@ -12,12 +12,12 @@ ts_library(
        ],
    ),
    deps = [
-        ":identity_tracker",
-        "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
-        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks/profiler",
-        "//devtools/projects/protocol",
+        ":identity_tracker_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:highlighter_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:utils_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks/profiler:profiler_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -25,8 +25,8 @@ ts_library(
    name = "identity_tracker",
    srcs = ["identity-tracker.ts"],
    deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:component_tree",
-        "//devtools/projects/ng-devtools-backend/src/lib:interfaces",
-        "//devtools/projects/protocol",
+        "//devtools/projects/ng-devtools-backend/src/lib:component_tree_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:interfaces_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -12,7 +12,7 @@ import {
  ElementProfile,
  LifecycleProfile,
  ProfilerFrame,
-} from 'protocol';
+} from '../../../../protocol';

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

-import {ElementPosition} from 'protocol';
+import {ElementPosition} from '../../../../protocol';

 import {ComponentTreeNode} from '../interfaces';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DevToolsNode, ElementPosition} from 'protocol';
+import {DevToolsNode, ElementPosition} from '../../../../protocol';

 import {buildDirectiveForest} from '../component-tree';
 import {ComponentInstanceType, ComponentTreeNode, DirectiveInstanceType} from '../interfaces';
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {LifecycleProfile} from 'protocol';
+import {LifecycleProfile} from '../../../../protocol';

 import {getDirectiveName} from '../highlighter';

@@ -8,13 +8,15 @@ ts_library(
        include = ["*.ts"],
        exclude = ["*.spec.ts"],
    ),
-    deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib:utils",
-        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
-        "//devtools/projects/ng-devtools-backend/src/lib/hooks:identity_tracker",
-        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//rxjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/ng-debug-api",
+        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:utils_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/hooks:identity_tracker_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ElementPosition, LifecycleProfile} from 'protocol';
+import {ElementPosition, LifecycleProfile} from '../../../../../protocol';
 import {Subject} from 'rxjs';

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

-import {Events, MessageBus} from 'protocol';
+import {Events, MessageBus} from '../../../protocol';

 import {subscribeToClientEvents} from './client-event-subscribers';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DevToolsNode} from 'protocol';
+import {DevToolsNode} from '../../../protocol';

 export interface DebuggingAPI {
  getComponent(node: Node): any;
@@ -18,10 +18,12 @@ ng_module(
 ts_test_library(
    name = "ng-debug-api_test_lib",
    srcs = ["ng-debug-api.spec.ts"],
-    deps = [
-        ":ng-debug-api",
+    interop_deps = [
        "//packages/core",
-        "@npm//jasmine",
+        ":ng-debug-api",
+    ],
+    deps = [
+        "//:node_modules/jasmine",
    ],
 )

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Route} from 'protocol';
+import {Route} from '../../../protocol';

 // todo(aleksanderbodurri): type these properly
 type AngularRoute = any;
@@ -6,8 +6,8 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ElementPosition} from 'protocol';
-import {arrayEquals} from 'shared-utils';
+import {ElementPosition} from '../../../protocol';
+import {arrayEquals} from '../../../shared-utils';

 import {ComponentTreeNode} from './interfaces';

@@ -1,6 +1,6 @@
-load("//devtools/tools:typescript.bzl", "ts_test_library")
-load("//devtools/tools:ng_module.bzl", "ng_module")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:typescript.bzl", "ts_test_library")

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

@@ -29,9 +29,10 @@ ts_test_library(
        "prop-type.spec.ts",
        "state-serializer.spec.ts",
    ],
-    deps = [
+    interop_deps = [
        ":state-serializer",
-        "//devtools/projects/protocol",
-        "@npm//@types",
+    ],
+    deps = [
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {PropType} from 'protocol';
+import {PropType} from '../../../../protocol';

 import {getPropType} from './prop-type';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {PropType} from 'protocol';
+import {PropType} from '../../../../protocol';

 import {isSignal} from '../utils';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ContainerType, Descriptor, NestedProp, PropType} from 'protocol';
+import {ContainerType, Descriptor, NestedProp, PropType} from '../../../../protocol';

 import {isSignal, unwrapSignal} from '../utils';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {PropType} from 'protocol';
+import {PropType} from '../../../../protocol';

 import {getDescriptor, getKeys} from './object-utils';
 import {deeplySerializeSelectedProperties} from './state-serializer';
@@ -6,8 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ContainerType, Descriptor, NestedProp, PropType} from 'protocol';
-import type {Signal} from '@angular/core';
+import {ContainerType, Descriptor, NestedProp, PropType} from '../../../../protocol';

 import {isSignal, unwrapSignal} from '../utils';

@@ -1,4 +1,3 @@
-load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
 load("//devtools/tools:ng_module.bzl", "ng_module")

 package(default_visibility = ["//visibility:public"])
@@ -6,7 +5,7 @@ package(default_visibility = ["//visibility:public"])
 exports_files(["tsconfig.lib.json"])

 ng_module(
-    name = "ng_devtools_ts",
+    name = "ng-devtools",
    srcs = ["index.ts"],
    deps = [
        "//devtools/projects/ng-devtools/src",
@@ -25,9 +24,3 @@ ng_module(
        "@npm//webtreemap",
    ],
 )
-
-js_library(
-    name = "ng-devtools",
-    package_name = "ng-devtools",
-    deps = [":ng_devtools_ts"],
-)
@@ -42,13 +42,16 @@ ng_module(
 ts_test_library(
    name = "devtools_test",
    srcs = ["devtools_spec.ts"],
-    deps = [
-        ":lib",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
        "//packages/core/testing",
+        ":lib",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs:devtools-tabs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
+    ],
+    deps = [
+        "//:node_modules/tslib",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -6,7 +6,6 @@ ts_library(
    name = "application-environment",
    srcs = ["index.ts"],
    deps = [
-        "//devtools/projects/protocol",
-        "@npm//@types",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -6,8 +6,7 @@ ts_library(
    name = "application-operations",
    srcs = ["index.ts"],
    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
-        "//devtools/projects/protocol",
-        "@npm//@types",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -7,7 +7,7 @@
 */

 import {Frame} from '../application-environment';
-import {DirectivePosition, ElementPosition} from 'protocol';
+import {DirectivePosition, ElementPosition} from '../../../../protocol';

 export abstract class ApplicationOperations {
  abstract viewSource(position: ElementPosition, target: Frame, directiveIndex?: number): void;
@@ -39,16 +39,18 @@ ng_module(
 ts_test_library(
    name = "test_application_services_lib",
    srcs = glob(["*_spec.ts"]),
-    deps = [
+    interop_deps = [
+        "//packages/common",
+        "//packages/core/testing",
        ":browser_styles",
        ":frame_manager",
        ":theme",
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
        "//devtools/projects/ng-devtools/src/lib/application-providers:window",
-        "//devtools/projects/protocol",
-        "//packages/common",
-        "//packages/core/testing",
-        "@npm//@angular/cdk",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -6,8 +6,10 @@
 * found in the LICENSE file at https://angular.dev/license
 */

+/// <reference types="chrome"/>
+
 import {Injectable, inject, signal, computed} from '@angular/core';
-import {Events, MessageBus} from 'protocol';
+import {Events, MessageBus} from '../../../../protocol';

 import {Frame, TOP_LEVEL_FRAME_ID} from '../application-environment';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Events, MessageBus} from 'protocol';
+import {Events, MessageBus} from '../../../../protocol';
 import {FrameManager} from './frame_manager';
 import {TestBed} from '@angular/core/testing';
 import {Frame} from '../application-environment';
@@ -41,20 +41,23 @@ ng_module(
 ts_test_library(
    name = "devtools_tabs_test",
    srcs = ["devtools-tabs.spec.ts"],
-    deps = [
+    interop_deps = [
+        "//packages/core",
        ":devtools-tabs",
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
-        "//devtools/projects/ng-devtools/src/lib/application-services:theme",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update",
-        "//devtools/projects/protocol",
-        "//packages/common",
-        "//packages/core",
        "//packages/core/src/util",
        "//packages/core/testing",
-        "@npm//@angular/material",
-        "@npm//rxjs",
+        "//packages/common",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
+        "//devtools/projects/ng-devtools/src/lib/application-services:theme",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library")
 load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:typescript.bzl", "ts_library")

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

@@ -18,11 +18,12 @@ ng_module(
 ts_library(
    name = "injector_tree_visualizer",
    srcs = ["injector-tree-visualizer.ts"],
-    deps = [
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
-        "@npm//d3",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@types/d3",
+        "//:node_modules/d3",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -7,7 +7,7 @@
 */

 import * as d3 from 'd3';
-import {SerializedInjector} from 'protocol';
+import {SerializedInjector} from '../../../../../protocol';

 let arrowDefId = 0;

@@ -16,7 +16,7 @@ import {
  OnDestroy,
  viewChild,
 } from '@angular/core';
-import {SerializedInjector} from 'protocol';
+import {SerializedInjector} from '../../../../../protocol';

 import {InjectorTreeNode, InjectorTreeVisualizer} from './injector-tree-visualizer';

@@ -12,7 +12,7 @@ import {MatMenu, MatMenuItem, MatMenuTrigger} from '@angular/material/menu';
 import {MatSlideToggle} from '@angular/material/slide-toggle';
 import {MatTabLink, MatTabNav, MatTabNavPanel} from '@angular/material/tabs';
 import {MatTooltip} from '@angular/material/tooltip';
-import {Events, MessageBus, Route} from 'protocol';
+import {Events, MessageBus, Route} from '../../../../protocol';

 import {ApplicationEnvironment, Frame, TOP_LEVEL_FRAME_ID} from '../application-environment/index';
 import {FrameManager} from '../application-services/frame_manager';
@@ -10,7 +10,7 @@ import {Component} from '@angular/core';
 import {TestBed} from '@angular/core/testing';
 import {MatMenuModule} from '@angular/material/menu';
 import {MatTooltip} from '@angular/material/tooltip';
-import {Events, MessageBus} from 'protocol';
+import {Events, MessageBus} from '../../../../protocol';
 import {Subject} from 'rxjs';

 import {ApplicationEnvironment} from '../application-environment';
@@ -4,14 +4,13 @@ package(default_visibility = ["//visibility:public"])

 ts_library(
    name = "diffing",
-    srcs = glob(
-        include = [
-            "index.ts",
-        ],
-    ),
-    deps = [
+    srcs = [
+        "index.ts",
+    ],
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
    ],
 )
@@ -41,20 +41,23 @@ ng_module(
 ts_test_library(
    name = "directive_explorer_test",
    srcs = ["directive-explorer.spec.ts"],
-    deps = [
+    interop_deps = [
+        "//packages/core",
        ":directive-explorer",
-        "//devtools/projects/ng-devtools/src/lib/application-operations",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab",
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update",
-        "//devtools/projects/protocol",
-        "//packages/core",
        "//packages/core/testing",
        "//packages/platform-browser",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
+    ],
+    deps = [
+        "//:node_modules/tslib",
+        "//devtools/projects/ng-devtools/src/lib/application-operations:application-operations_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -27,7 +27,7 @@ import {
  MessageBus,
  PropertyQuery,
  PropertyQueryTypes,
-} from 'protocol';
+} from '../../../../../protocol';

 import {SplitComponent} from '../../../lib/vendor/angular-split/public_api';
 import {ApplicationOperations} from '../../application-operations/index';
@@ -9,7 +9,7 @@
 import {ComponentFixture, TestBed} from '@angular/core/testing';

 import {ApplicationOperations} from '../../application-operations';
-import {DirectivePosition, MessageBus, PropType, PropertyQueryTypes} from 'protocol';
+import {DirectivePosition, MessageBus, PropType, PropertyQueryTypes} from '../../../../../protocol';

 import {DirectiveExplorerComponent} from './directive-explorer.component';
 import {DirectiveForestComponent} from './directive-forest/directive-forest.component';
@@ -1,20 +1,22 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")

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

 ts_library(
    name = "component-data-source",
    srcs = ["index.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/@types",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing:diffing_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest:index-forest_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -22,9 +24,9 @@ ts_test_library(
    name = "component_data_source_test",
    srcs = glob(["**/*.spec.ts"]),
    deps = [
-        ":component-data-source",
-        "//devtools/projects/protocol",
-        "@npm//@angular/cdk",
+        ":component-data-source_rjs",
+        "//:node_modules/@angular/cdk",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -7,7 +7,7 @@
 */

 import {FlatTreeControl} from '@angular/cdk/tree';
-import {DevToolsNode} from 'protocol';
+import {DevToolsNode} from '../../../../../../../protocol';

 import {ComponentDataSource, FlatNode} from '.';

@@ -10,7 +10,7 @@ import {CollectionViewer, DataSource} from '@angular/cdk/collections';
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {DefaultIterableDiffer, TrackByFunction} from '@angular/core';
 import {MatTreeFlattener} from '@angular/material/tree';
-import {DevToolsNode, HydrationStatus} from 'protocol';
+import {DevToolsNode, HydrationStatus} from '../../../../../../../protocol';
 import {BehaviorSubject, merge, Observable} from 'rxjs';
 import {map} from 'rxjs/operators';

@@ -8,7 +8,7 @@

 import {FlatTreeControl} from '@angular/cdk/tree';

-import {FlatNode} from './component-data-source';
+import {FlatNode} from './component-data-source/index';

 export const isChildOf = (childPosition: number[], parentPosition: number[]) => {
  if (childPosition.length <= parentPosition.length) {
@@ -26,7 +26,7 @@ import {
  signal,
  viewChild,
 } from '@angular/core';
-import {DevToolsNode, ElementPosition, Events, MessageBus} from 'protocol';
+import {DevToolsNode, ElementPosition, Events, MessageBus} from '../../../../../../protocol';

 import {TabUpdate} from '../../tab-update/index';

@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")

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

@@ -7,8 +7,8 @@ ts_library(
    name = "index-forest",
    srcs = ["index.ts"],
    deps = [
-        "//devtools/projects/protocol",
-        "@npm//@angular/material",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -16,7 +16,7 @@ ts_test_library(
    name = "index_forest_test",
    srcs = glob(["**/*.spec.ts"]),
    deps = [
-        ":index-forest",
+        ":index-forest_rjs",
    ],
 )

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DevToolsNode, ElementPosition} from 'protocol';
+import {DevToolsNode, ElementPosition} from '../../../../../../../protocol';

 export interface IndexedNode extends DevToolsNode {
  position: ElementPosition;
@@ -1,6 +1,6 @@
+load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
 load("//devtools/tools:ng_module.bzl", "ng_module")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
-load("//devtools/tools:defaults.bzl", "karma_web_test_suite")

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

@@ -34,12 +34,14 @@ ts_test_library(
        "element-property-resolver.spec.ts",
        "property-data-source.spec.ts",
    ],
-    deps = [
-        ":property-resolver",
+    interop_deps = [
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
-        "//devtools/projects/protocol",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
+        ":property-resolver",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {PropType} from 'protocol';
+import {PropType} from '../../../../../../protocol';

 import {arrayifyProps} from './arrayify-props';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Descriptor} from 'protocol';
+import {Descriptor} from '../../../../../../protocol';

 import {Property} from './element-property-resolver';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Properties, PropType} from 'protocol';
+import {Properties, PropType} from '../../../../../../protocol';

 import {DirectivePropertyResolver} from './directive-property-resolver';

@@ -16,7 +16,7 @@ import {
  MessageBus,
  NestedProp,
  Properties,
-} from 'protocol';
+} from '../../../../../../protocol';

 import {FlatNode, Property} from './element-property-resolver';
 import {getTreeFlattener} from './flatten';
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Properties, PropType} from 'protocol';
+import {Properties, PropType} from '../../../../../../protocol';

 import {IndexedNode} from '../directive-forest/index-forest';

@@ -14,7 +14,7 @@ import {
  DirectivesProperties,
  Events,
  MessageBus,
-} from 'protocol';
+} from '../../../../../../protocol';

 import {IndexedNode} from '../directive-forest/index-forest';

@@ -7,7 +7,7 @@
 */

 import {MatTreeFlattener} from '@angular/material/tree';
-import {Descriptor, PropType} from 'protocol';
+import {Descriptor, PropType} from '../../../../../../protocol';
 import {Observable} from 'rxjs';

 import {arrayifyProps} from './arrayify-props';
@@ -7,7 +7,7 @@
 */

 import {FlatTreeControl} from '@angular/cdk/tree';
-import {PropType} from 'protocol';
+import {PropType} from '../../../../../../protocol';

 import {FlatNode} from './element-property-resolver';
 import {getTreeFlattener} from './flatten';
@@ -10,7 +10,13 @@ import {CollectionViewer, DataSource, SelectionChange} from '@angular/cdk/collec
 import {FlatTreeControl} from '@angular/cdk/tree';
 import {DefaultIterableDiffer, TrackByFunction} from '@angular/core';
 import {MatTreeFlattener} from '@angular/material/tree';
-import {Descriptor, DirectivePosition, Events, MessageBus, Properties} from 'protocol';
+import {
+  Descriptor,
+  DirectivePosition,
+  Events,
+  MessageBus,
+  Properties,
+} from '../../../../../../protocol';
 import {BehaviorSubject, merge, Observable, Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {Descriptor, NestedProp, PropType} from 'protocol';
+import {Descriptor, NestedProp, PropType} from '../../../../../../protocol';

 import {FlatNode} from './element-property-resolver';

@@ -7,7 +7,7 @@
 */

 import {ChangeDetectionStrategy, Component, computed, inject, input} from '@angular/core';
-import {ComponentType} from 'protocol';
+import {ComponentType} from '../../../../../../protocol';

 import {ElementPropertyResolver} from '../property-resolver/element-property-resolver';

@@ -7,7 +7,7 @@
 */

 import {Component, input, output} from '@angular/core';
-import {DirectivePosition} from 'protocol';
+import {DirectivePosition} from '../../../../../../protocol';

 import {IndexedNode} from '../directive-forest/index-forest';
 import {FlatNode} from '../property-resolver/element-property-resolver';
@@ -17,7 +17,7 @@ import {
  viewChild,
 } from '@angular/core';
 import {FormsModule} from '@angular/forms';
-import {ContainerType} from 'protocol';
+import {ContainerType} from '../../../../../../../protocol';

 type EditorType = string | number | boolean;
 type EditorResult = EditorType | Array<EditorType>;
@@ -7,7 +7,7 @@
 */

 import {Component, computed, input, output} from '@angular/core';
-import {PropType} from 'protocol';
+import {PropType} from '../../../../../../../protocol';

 import {FlatNode} from '../../property-resolver/element-property-resolver';

@@ -7,7 +7,7 @@
 */

 import {Component, computed, input, output} from '@angular/core';
-import {DirectivePosition} from 'protocol';
+import {DirectivePosition} from '../../../../../../../protocol';

 import {IndexedNode} from '../../directive-forest/index-forest';
 import {FlatNode} from '../../property-resolver/element-property-resolver';
@@ -8,7 +8,7 @@

 import {CdkDragDrop, moveItemInArray, CdkDropList, CdkDrag} from '@angular/cdk/drag-drop';
 import {Component, computed, forwardRef, input, output, signal} from '@angular/core';
-import {DirectivePosition, SerializedInjectedService} from 'protocol';
+import {DirectivePosition, SerializedInjectedService} from '../../../../../../../protocol';

 import {
  DirectivePropertyResolver,
@@ -7,7 +7,7 @@
 */

 import {Component, computed, inject, input, output} from '@angular/core';
-import {DirectivePosition} from 'protocol';
+import {DirectivePosition} from '../../../../../../../protocol';

 import {ElementPropertyResolver, FlatNode} from '../../property-resolver/element-property-resolver';
 import {PropertyViewBodyComponent} from './property-view-body.component';
@@ -48,9 +48,9 @@ ts_test_library(
        "injector-tree-fns.spec.ts",
    ],
    deps = [
-        ":injector_tree_fns",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer",
-        "//devtools/projects/protocol",
+        ":injector_tree_fns_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -58,7 +58,7 @@ ts_library(
    name = "injector_tree_fns",
    srcs = ["injector-tree-fns.ts"],
    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer",
-        "//devtools/projects/protocol",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -14,7 +14,12 @@ import {MatInput} from '@angular/material/input';
 import {MatSelect} from '@angular/material/select';
 import {MatTableModule} from '@angular/material/table';
 import {MatTooltip} from '@angular/material/tooltip';
-import {Events, MessageBus, SerializedInjector, SerializedProviderRecord} from 'protocol';
+import {
+  Events,
+  MessageBus,
+  SerializedInjector,
+  SerializedProviderRecord,
+} from '../../../../../../protocol';

@Component({
  selector: 'ng-injector-providers',
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ComponentType, DevToolsNode} from 'protocol';
+import {DevToolsNode} from '../../../../../protocol';
 import {
  InjectorTreeD3Node,
  InjectorTreeNode,
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DevToolsNode, SerializedInjector} from 'protocol';
+import {DevToolsNode, SerializedInjector} from '../../../../../protocol';

 import {
  InjectorTreeD3Node,
@@ -25,7 +25,7 @@ import {
  MessageBus,
  SerializedInjector,
  SerializedProviderRecord,
-} from 'protocol';
+} from '../../../../../protocol';

 import {SplitAreaDirective, SplitComponent} from '../../vendor/angular-split/public_api';
 import {
@@ -8,7 +8,7 @@

 import {Component, inject, signal} from '@angular/core';
 import {MatDialog} from '@angular/material/dialog';
-import {Events, MessageBus, ProfilerFrame} from 'protocol';
+import {Events, MessageBus, ProfilerFrame} from '../../../../../protocol';
 import {Subject} from 'rxjs';

 import {FileApiService} from './file-api-service';
@@ -1,7 +1,7 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:typescript.bzl", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:typescript.bzl", "ts_test_library")

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

@@ -71,7 +71,7 @@ ts_test_library(
        "filter.spec.ts",
        "timeline.component.spec.ts",
    ],
-    deps = [
+    interop_deps = [
        ":timeline",
    ],
 )
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ProfilerFrame} from 'protocol';
+import {ProfilerFrame} from '../../../../../../protocol';

 import {GraphNode} from './record-formatter/record-formatter';

@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")

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

@@ -15,23 +15,25 @@ ts_library(
            "frame-merger.spec.ts",
        ],
    ),
-    deps = [
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

 ts_library(
    name = "record_formatter_spec_constants",
    srcs = ["record-formatter-spec-constants.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
-        "@npm//rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -41,11 +43,13 @@ ts_test_library(
        "frame-merger.spec.ts",
        "record-formatter.spec.ts",
    ],
-    deps = [
-        ":record-formatter",
-        ":record_formatter_spec_constants",
+    interop_deps = [
        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter",
-        "//devtools/projects/protocol",
+    ],
+    deps = [
+        ":record-formatter_rjs",
+        ":record_formatter_spec_constants_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -9,14 +9,16 @@ ts_library(
            "*.ts",
        ],
    ),
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-services:theme",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter",
-        "//devtools/projects/ng-devtools/src/lib/vendor/memo-decorator",
-        "//devtools/projects/protocol",
+    interop_deps = [
        "//packages/core",
-        "@npm//@types",
-        "@npm//ngx-flamegraph",
-        "@npm//rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:theme",
+    ],
+    deps = [
+        "//:node_modules/ngx-flamegraph",
+        "//:node_modules/rxjs",
+        "//:node_modules/tslib",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/memo-decorator:memo-decorator_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DirectiveProfile, ElementProfile, ProfilerFrame} from 'protocol';
+import {DirectiveProfile, ElementProfile, ProfilerFrame} from '../../../../../../../../protocol';

 import {memo} from '../../../../../vendor/memo-decorator';
 import {RecordFormatter} from '../record-formatter';
@@ -28,11 +28,13 @@ ts_test_library(
    srcs = [
        "flamegraph-formatter.spec.ts",
    ],
-    deps = [
+    interop_deps = [
        ":flamegraph-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record_formatter_spec_constants",
-        "//devtools/projects/protocol",
+    ],
+    deps = [
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record_formatter_spec_constants_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ElementProfile, ProfilerFrame} from 'protocol';
+import {ElementProfile, ProfilerFrame} from '../../../../../../../../protocol';

 import {Theme} from '../../../../../application-services/theme_service';
 import {RecordFormatter} from '../record-formatter';
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ProfilerFrame} from 'protocol';
+import {ProfilerFrame} from '../../../../../../../protocol';

 import {mergeFrames} from './frame-merger';

@@ -6,7 +6,12 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DirectiveProfile, ElementProfile, LifecycleProfile, ProfilerFrame} from 'protocol';
+import {
+  DirectiveProfile,
+  ElementProfile,
+  LifecycleProfile,
+  ProfilerFrame,
+} from '../../../../../../../protocol';

 const mergeProperty = (mergeInProp: number | undefined, value: number | undefined) => {
  if (mergeInProp === undefined) {
@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DirectiveProfile, ElementProfile, ProfilerFrame} from 'protocol';
+import {DirectiveProfile, ElementProfile, ProfilerFrame} from '../../../../../../../protocol';

 import {RecordFormatter} from './record-formatter';

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {DirectiveProfile, ElementProfile, ProfilerFrame} from 'protocol';
+import {DirectiveProfile, ElementProfile, ProfilerFrame} from '../../../../../../../protocol';

 export interface TimelineView<T> {
  timeline: AppEntry<T>[];
@@ -1,5 +1,5 @@
-load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
+load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")

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

@@ -14,9 +14,10 @@ ts_library(
        ],
    ),
    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter",
-        "//devtools/projects/ng-devtools/src/lib/vendor/memo-decorator",
-        "//devtools/projects/protocol",
+        "//:node_modules/tslib",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/memo-decorator:memo-decorator_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -26,10 +27,10 @@ ts_test_library(
        "tree-map-formatter.spec.ts",
    ],
    deps = [
-        ":tree-map-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record_formatter_spec_constants",
-        "//devtools/projects/protocol",
+        ":tree-map-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record_formatter_spec_constants_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
    ],
 )

@@ -6,7 +6,7 @@
 * found in the LICENSE file at https://angular.dev/license
 */

-import {ElementProfile, ProfilerFrame} from 'protocol';
+import {ElementProfile, ProfilerFrame} from '../../../../../../../../protocol';

 import {memo} from '../../../../../vendor/memo-decorator';
 import {RecordFormatter} from '../record-formatter';
@@ -7,7 +7,7 @@
 */

 import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core';
-import {ProfilerFrame} from 'protocol';
+import {ProfilerFrame} from '../../../../../../../protocol';

 import {ThemeService} from '../../../../application-services/theme_service';
 import {BarGraphFormatter, BargraphNode} from '../record-formatter/bargraph-formatter/index';
@@ -8,7 +8,7 @@

 import {ChangeDetectionStrategy, Component, computed, inject, input, output} from '@angular/core';
 import {Color, RawData} from 'ngx-flamegraph/lib/utils';
-import {ProfilerFrame} from 'protocol';
+import {ProfilerFrame} from '../../../../../../../protocol';

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

-import {DirectiveProfile} from 'protocol';
+import {DirectiveProfile} from '../../../../../../../protocol';

 import {SelectedDirective} from './timeline-visualizer.component';

@@ -7,7 +7,7 @@
 */

 import {ChangeDetectionStrategy, Component, computed, input, linkedSignal} from '@angular/core';
-import {ProfilerFrame} from 'protocol';
+import {ProfilerFrame} from '../../../../../../../protocol';

 import {BargraphNode} from '../record-formatter/bargraph-formatter';
 import {FlamegraphNode} from '../record-formatter/flamegraph-formatter';
@@ -19,7 +19,7 @@ import {
  OnDestroy,
  viewChild,
 } from '@angular/core';
-import {ProfilerFrame} from 'protocol';
+import {ProfilerFrame} from '../../../../../../../protocol';
 import {Subject, Subscription} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';

--- a/Show More
+++ b/Show More