build: migrate devtools to use ng-project (#61317)

Migrate devtools to use ng-project

PR Close #61317

devtools/projects/demo-no-zone/src/BUILD.bazel

@@ -1,19 +1,20 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//tools:defaults.bzl", "esbuild", "http_server")
 
 package(default_visibility = ["//:__subpackages__"])
 
-ng_module(
+ng_project(
     name = "src",
     srcs = ["main.ts"],
-    deps = [
-        "//devtools/projects/demo-no-zone/src/app",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/platform-browser",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/demo-no-zone/src/app:app_rjs",
     ],
 )
 

devtools/projects/demo-no-zone/src/app/BUILD.bazel

@@ -1,17 +1,19 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "app",
     srcs = glob(
         include = ["*.ts"],
     ),
     angular_assets = ["app.component.html"],
-    deps = [
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/platform-browser",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
     ],
 )

devtools/projects/demo-standalone/src/BUILD.bazel

@@ -1,7 +1,7 @@
 load("@aspect_bazel_lib//lib:copy_to_directory.bzl", "copy_to_directory")
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools/esbuild:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 load("//tools:defaults.bzl", "esbuild", "http_server")
 
@@ -38,11 +38,10 @@ copy_to_directory(
     },
 )
 
-ng_module(
+ng_project(
     name = "demo",
     srcs = ["main.ts"],
-    deps = [
-        "//devtools/projects/demo-standalone/src/app",
+    interop_deps = [
         "//devtools/src:demo_application_environment",
         "//devtools/src:demo_application_operations",
         "//packages/common",
@@ -50,8 +49,10 @@ ng_module(
         "//packages/core",
         "//packages/core/src/util",
         "//packages/platform-browser",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/demo-standalone/src/app:app_rjs",
     ],
 )
 

devtools/projects/demo-standalone/src/app/BUILD.bazel

@@ -1,19 +1,21 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "app",
     srcs = [
         "app.component.ts",
     ],
-    deps = [
-        "//devtools/projects/demo-standalone/src/app/demo-app",
-        "//devtools/projects/demo-standalone/src/app/devtools-app",
-        "//devtools/projects/ng-devtools",
+    interop_deps = [
         "//packages/core",
         "//packages/platform-browser",
         "//packages/platform-browser/animations",
         "//packages/router",
     ],
+    deps = [
+        "//devtools/projects/demo-standalone/src/app/demo-app:demo-app_rjs",
+        "//devtools/projects/demo-standalone/src/app/devtools-app:devtools-app_rjs",
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+    ],
 )

devtools/projects/demo-standalone/src/app/demo-app/BUILD.bazel

@@ -1,5 +1,5 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -19,7 +19,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "demo-app",
     srcs = [
         "demo-app.component.ts",
@@ -30,12 +30,14 @@ ng_module(
         "demo-app.component.html",
         ":demo_app_component_styles",
     ],
-    deps = [
-        "//devtools/projects/demo-standalone/src/app/demo-app/todo",
-        "//devtools/projects/ng-devtools-backend",
-        "//devtools/src:zone-unaware-iframe_message_bus",
+    interop_deps = [
         "//packages/core",
         "//packages/elements",
         "//packages/router",
     ],
+    deps = [
+        "//devtools/projects/demo-standalone/src/app/demo-app/todo:todo_rjs",
+        "//devtools/projects/ng-devtools-backend:ng-devtools-backend_rjs",
+        "//devtools/src:zone-unaware-iframe_message_bus_rjs",
+    ],
 )

devtools/projects/demo-standalone/src/app/demo-app/todo/BUILD.bazel

@@ -1,20 +1,22 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "todo",
     srcs = [
         "dialog.component.ts",
         "todo-app.component.ts",
     ],
-    deps = [
-        "//devtools/projects/demo-standalone/src/app/demo-app/todo/about",
-        "//devtools/projects/demo-standalone/src/app/demo-app/todo/home",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/forms",
         "//packages/router",
-        "@npm//@angular/material",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//devtools/projects/demo-standalone/src/app/demo-app/todo/about:about_rjs",
+        "//devtools/projects/demo-standalone/src/app/demo-app/todo/home:home_rjs",
     ],
 )

devtools/projects/demo-standalone/src/app/demo-app/todo/about/BUILD.bazel

@@ -1,11 +1,11 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "about",
     srcs = ["about.component.ts"],
-    deps = [
+    interop_deps = [
         "//packages/core",
         "//packages/router",
     ],

devtools/projects/demo-standalone/src/app/demo-app/todo/home/BUILD.bazel

@@ -1,8 +1,8 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "home",
     srcs = [
         "sample.pipe.ts",
@@ -10,7 +10,7 @@ ng_module(
         "todos.component.ts",
         "tooltip.directive.ts",
     ],
-    deps = [
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/router",

devtools/projects/demo-standalone/src/app/devtools-app/BUILD.bazel

@@ -1,17 +1,19 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "devtools-app",
     srcs = ["devtools-app.component.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
-        "//devtools/projects/protocol",
-        "//devtools/src:iframe_message_bus",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/router",
     ],
+    deps = [
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+        "//devtools/src:iframe_message_bus_rjs",
+    ],
 )

devtools/projects/ng-devtools-backend/src/lib/ng-debug-api/BUILD.bazel

@@ -1,21 +1,23 @@
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "ng-debug-api",
     srcs = glob(
         include = ["*.ts"],
         exclude = ["*.spec.ts"],
     ),
-    deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:core-enums",
-        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:get-roots",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/core",
     ],
+    deps = [
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:core-enums_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:get-roots_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+    ],
 )
 
 ts_test_library(

devtools/projects/ng-devtools-backend/src/lib/state-serializer/BUILD.bazel

@@ -1,18 +1,18 @@
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "state-serializer",
     srcs = glob(
         include = ["*.ts"],
         exclude = ["*.spec.ts"],
     ),
     deps = [
-        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest",
-        "//devtools/projects/protocol",
+        "//devtools/projects/ng-devtools-backend/src/lib/directive-forest:directive-forest_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/BUILD.bazel

@@ -1,26 +1,28 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
 exports_files(["tsconfig.lib.json"])
 
-ng_module(
+ng_project(
     name = "ng-devtools",
     srcs = ["index.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools/src",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/animations",
         "//packages/common",
         "//packages/core",
         "//packages/forms",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//d3",
-        "@npm//memo-decorator",
-        "@npm//ngx-flamegraph",
-        "@npm//rxjs",
-        "@npm//webtreemap",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/@types/d3",
+        "//:node_modules/d3",
+        "//:node_modules/memo-decorator",
+        "//:node_modules/ngx-flamegraph",
+        "//:node_modules/rxjs",
+        "//:node_modules/webtreemap",
+        "//devtools/projects/ng-devtools/src:src_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/BUILD.bazel

@@ -1,13 +1,13 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "src",
     srcs = ["public-api.ts"],
     deps = [
-        "//devtools/projects/ng-devtools/src/lib",
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
-        "//devtools/projects/ng-devtools/src/lib/application-operations",
+        "//devtools/projects/ng-devtools/src/lib:lib_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-operations:application-operations_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -13,7 +13,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "lib",
     srcs = glob(
         include = ["*.ts"],
@@ -25,20 +25,21 @@ ng_module(
         "devtools.component.html",
         ":devtools_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-providers:window",
-        "//devtools/projects/ng-devtools/src/lib/application-services:browser_styles",
-        "//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",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/animations",
         "//packages/core",
         "//packages/forms",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-providers:window_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:browser_styles_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:theme_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs:devtools-tabs_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/application-providers/BUILD.bazel

@@ -1,11 +1,11 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "window",
     srcs = ["window_provider.ts"],
-    deps = [
+    interop_deps = [
         "//packages/core",
     ],
 )

devtools/projects/ng-devtools/src/lib/application-services/BUILD.bazel

@@ -1,38 +1,44 @@
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "browser_styles",
     srcs = ["browser_styles_service.ts"],
-    deps = [
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/cdk",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
     ],
 )
 
-ng_module(
+ng_project(
     name = "frame_manager",
     srcs = ["frame_manager.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/core",
     ],
+    deps = [
+        "//:node_modules/@types/chrome",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+    ],
 )
 
-ng_module(
+ng_project(
     name = "theme",
     srcs = ["theme_service.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-providers:window",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-providers:window_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -13,7 +13,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "devtools-tabs",
     srcs = [
         "devtools-tabs.component.ts",
@@ -22,22 +22,24 @@ ng_module(
         "devtools-tabs.component.html",
         ":devtools_tabs_component_styles",
     ],
-    deps = [
-        "//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/injector-tree:injector_tree",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/core/src/util",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/@types/chrome",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:theme_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer:directive-explorer_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree:injector_tree_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler:profiler_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree:router-tree_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update:tab-update_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//:__subpackages__"])
@@ -14,7 +14,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "resolution-path",
     srcs = [
         "resolution-path.component.ts",
@@ -23,10 +23,12 @@ ng_module(
         ":resolution-path.component.html",
         ":resolution_path_styles",
     ],
-    deps = [
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/core",
     ],
+    deps = [
+        "//devtools/projects/protocol:protocol_rjs",
+    ],
 )
 
 ts_test_library(

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -10,7 +10,7 @@ sass_binary(
     src = "directive-explorer.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "directive-explorer",
     srcs = [
         "directive-explorer.component.ts",
@@ -19,22 +19,23 @@ ng_module(
         "directive-explorer.component.html",
         ":directive_explorer_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-operations",
-        "//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/component-data-source",
-        "//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/vendor/angular-split",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-operations:application-operations_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest:directive-forest_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs:breadcrumbs_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source:component-data-source_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest:index-forest_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab:property-tab_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split:angular-split_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -10,7 +10,7 @@ sass_binary(
     src = "directive-forest.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "directive-forest",
     srcs = [
         "directive-forest.component.ts",
@@ -19,18 +19,20 @@ ng_module(
         "directive-forest.component.html",
         ":directive_forest_component_styles",
     ],
-    deps = [
-        ":directive_forest_utils",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing",
-        "//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/component-data-source",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/core",
-        "@npm//@angular/cdk",
+    ],
+    deps = [
+        ":directive_forest_utils_rjs",
+        "//:node_modules/@angular/cdk",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/diffing:diffing_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs:breadcrumbs_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source:component-data-source_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter:filter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest:index-forest_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node:tree-node_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update:tab-update_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/breadcrumbs/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -11,7 +11,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "breadcrumbs",
     srcs = [
         "breadcrumbs.component.ts",
@@ -20,12 +20,13 @@ ng_module(
         "breadcrumbs.component.html",
         ":breadcrumbs_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source:component-data-source_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/filter/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -10,7 +10,7 @@ sass_binary(
     src = "filter.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "filter",
     srcs = [
         "filter.component.ts",
@@ -19,12 +19,13 @@ ng_module(
         "filter.component.html",
         ":filter_component_styles",
     ],
-    deps = [
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/tree-node/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//devtools:__subpackages__"])
@@ -13,7 +13,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "tree-node",
     srcs = [
         "tree-node.component.ts",
@@ -22,13 +22,15 @@ ng_module(
         "tree-node.component.html",
         ":tree_node_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest:directive_forest_utils",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest:directive_forest_utils_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/component-data-source:component-data-source_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver/BUILD.bazel

@@ -1,10 +1,10 @@
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "property-resolver",
     srcs = [
         "arrayify-props.ts",
@@ -14,15 +14,16 @@ ng_module(
         "property-data-source.ts",
         "property-expanded-directive-properties.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/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",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -25,7 +25,7 @@ _STYLE_LABELS = [
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
 
-ng_module(
+ng_project(
     name = "property-tab",
     srcs = [
         "component-metadata.component.ts",
@@ -37,16 +37,17 @@ ng_module(
         "property-tab-header.component.html",
         "component-metadata.component.html",
     ] + _STYLE_LABELS,
-    deps = [
-        "//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/defer-view",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest:index-forest_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view:defer-view_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view:property-view_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/defer-view/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -9,19 +9,21 @@ sass_binary(
     deps = ["//devtools/projects/ng-devtools/src/styles:typography"],
 )
 
-ng_module(
+ng_project(
     name = "defer-view",
     srcs = [
         "defer-view.component.ts",
     ],
     angular_assets = [
         "defer-view.component.html",
-    ] + ["defer_view.component.scss_styles"],
-    deps = [
-        "//devtools/projects/protocol",
+        "defer_view.component.scss_styles",
+    ],
+    interop_deps = [
         "//packages/core",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-tab/property-view/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -30,7 +30,7 @@ _STYLE_LABELS = [
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
 
-ng_module(
+ng_project(
     name = "property-view",
     srcs = [
         "dependency-viewer.component.ts",
@@ -52,20 +52,21 @@ ng_module(
         "property-tab-body.component.html",
         "dependency-viewer.component.html",
     ] + _STYLE_LABELS,
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-environment",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path",
-        "//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/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/forms",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-environment:application-environment_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path:resolution-path_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/directive-forest/index-forest:index-forest_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/directive-explorer/property-resolver:property-resolver_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 
 package(default_visibility = ["//:__subpackages__"])
@@ -13,7 +13,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "injector_tree",
     srcs = [
         "injector-tree.component.ts",
@@ -22,20 +22,22 @@ ng_module(
         ":injector_tree_styles",
         "injector-tree.component.html",
     ],
-    deps = [
-        ":injector_tree_fns",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host",
-        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//d3",
-        "@npm//rxjs",
+    ],
+    deps = [
+        ":injector_tree_fns_rjs",
+        "//:node_modules/@angular/material",
+        "//:node_modules/@types/d3",
+        "//:node_modules/d3",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection:injector_tree_visualizer_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path:resolution-path_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers:injector-providers_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host:tree-visualizer-host_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split:angular-split_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/injector-tree/injector-providers/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -10,7 +10,7 @@ sass_binary(
     deps = ["//devtools/projects/ng-devtools/src/styles:typography"],
 )
 
-ng_module(
+ng_project(
     name = "injector-providers",
     srcs = [
         "injector-providers.component.ts",
@@ -19,12 +19,14 @@ ng_module(
         "injector-providers.component.html",
         ":injector_providers_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/animations",
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/material",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/dependency-injection/resolution-path:resolution-path_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -24,7 +24,7 @@ _STYLE_LABELS = [
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
 
-ng_module(
+ng_project(
     name = "profiler",
     srcs = [
         "file-api-service.ts",
@@ -35,13 +35,15 @@ ng_module(
         "profiler.component.html",
         "profiler-import-dialog.component.html",
     ] + _STYLE_LABELS,
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/forms",
-        "@npm//@angular/material",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline:timeline_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
@@ -34,7 +34,7 @@ sass_binary(
     include_paths = ["node_modules"],
 )
 
-ng_module(
+ng_project(
     name = "timeline",
     srcs = [
         "filter.ts",
@@ -52,19 +52,21 @@ ng_module(
         "frame-selector.component.html",
         ":recording_modal_styles",
     ] + _STYLE_LABELS,
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/visualization-mode",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/forms",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//ngx-flamegraph",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/ngx-flamegraph",
+        "//:node_modules/rxjs",
+        "//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/recording-visualizer:recording-visualizer_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/visualization-mode:visualization-mode_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tab-update:tab-update_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter/BUILD.bazel

@@ -1,10 +1,10 @@
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_test_library")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "flamegraph-formatter",
     srcs = glob(
         include = [
@@ -12,14 +12,15 @@ ng_module(
         ],
         exclude = ["flamegraph-formatter.spec.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/protocol",
+    interop_deps = [
         "//packages/core",
-        "@npm//@types",
-        "@npm//memo-decorator",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/memo-decorator",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:theme_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter:record-formatter_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 

devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/recording-visualizer/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -28,7 +28,7 @@ _STYLE_LABELS = [
     for label, src in zip(_STYLE_LABELS, _STYLE_SRCS)
 ]
 
-ng_module(
+ng_project(
     name = "recording-visualizer",
     srcs = [
         "bar-chart.component.ts",
@@ -47,22 +47,23 @@ ng_module(
         "bar-chart.component.html",
         "execution-details.component.html",
     ] + _STYLE_LABELS,
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/application-services:theme",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter",
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/visualization-mode",
-        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split",
-        "//devtools/projects/ng-devtools/src/lib/vendor/webtreemap",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/animations",
         "//packages/common",
         "//packages/core",
         "//packages/core/rxjs-interop",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//ngx-flamegraph",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/ngx-flamegraph",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:theme_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/bargraph-formatter:bargraph-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/flamegraph-formatter:flamegraph-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/record-formatter/tree-map-formatter:tree-map-formatter_rjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/profiler/timeline/visualization-mode:visualization-mode_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split:angular-split_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/webtreemap:webtreemap_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/router-tree/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "router-tree.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "router-tree",
     srcs = [
         "router-tree.component.ts",
@@ -18,14 +18,16 @@ ng_module(
         ":router-tree.component.html",
         ":router_tree_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host",
-        "//devtools/projects/protocol",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@angular/material",
-        "@npm//@types",
-        "@npm//d3",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//:node_modules/@types/d3",
+        "//:node_modules/d3",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host:tree-visualizer-host_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/devtools-tabs/tree-visualizer-host/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -9,7 +9,7 @@ sass_binary(
     deps = ["//devtools/projects/ng-devtools/src/styles:typography"],
 )
 
-ng_module(
+ng_project(
     name = "tree-visualizer-host",
     srcs = [
         "tree-visualizer-host.component.ts",
@@ -17,7 +17,7 @@ ng_module(
     angular_assets = [
         ":tree_visualizer_host_styles",
     ],
-    deps = [
+    interop_deps = [
         "//packages/core",
     ],
 )

devtools/projects/ng-devtools/src/lib/vendor/angular-split/BUILD.bazel

@@ -1,15 +1,16 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "angular-split",
     srcs = ["public_api.ts"],
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib",
-        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component:split",
+    interop_deps = [
         "//packages/core",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib:lib_rjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component:split_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/BUILD.bazel

@@ -1,19 +1,20 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "lib",
     srcs = glob(
         include = [
             "*.ts",
         ],
     ),
-    deps = [
-        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component:split",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component:split_rjs",
     ],
 )

devtools/projects/ng-devtools/src/lib/vendor/angular-split/lib/component/BUILD.bazel

@@ -1,5 +1,5 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//:__subpackages__"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "split.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "split",
     srcs = [
         "interface.ts",
@@ -19,9 +19,11 @@ ng_module(
     angular_assets = [
         ":split_styles",
     ],
-    deps = [
+    interop_deps = [
         "//packages/common",
         "//packages/core",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
     ],
 )

devtools/projects/shell-browser/src/BUILD.bazel

@@ -2,7 +2,7 @@ load("@aspect_bazel_lib//lib:copy_to_directory.bzl", "copy_to_directory")
 load("@bazel_skylib//rules:common_settings.bzl", "string_flag")
 load("@build_bazel_rules_nodejs//:index.bzl", "js_library", "pkg_web")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_library")
 load("//devtools/tools/esbuild:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 load("//tools:defaults.bzl", "esbuild")
@@ -55,19 +55,21 @@ js_library(
     deps = [":devtools_ts"],
 )
 
-ng_module(
+ng_project(
     name = "src",
     srcs = [
         "main.ts",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools",
-        "//devtools/projects/shell-browser/src/app",
-        "//devtools/projects/shell-browser/src/environments:environment",
+    interop_deps = [
         "//packages/common",
         "//packages/common/http",
         "//packages/core",
     ],
+    deps = [
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/projects/shell-browser/src/app:app_rjs",
+        "//devtools/projects/shell-browser/src/environments:environment_rjs",
+    ],
 )
 
 esbuild(

devtools/projects/shell-browser/src/app/BUILD.bazel

@@ -1,6 +1,6 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
 load("//devtools/tools:defaults.bzl", "karma_web_test_suite")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools:typescript.bzl", "ts_library", "ts_test_library")
 load("//tools:defaults.bzl", "esbuild")
 
@@ -11,7 +11,7 @@ sass_binary(
     src = "app.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "app",
     srcs = [
         "app.component.ts",
@@ -21,23 +21,26 @@ ng_module(
         "app.component.html",
         ":app_component_styles",
     ],
-    deps = [
-        ":chrome_application_environment",
-        ":chrome_application_operations",
-        ":zone_aware_chrome_message_bus",
-        "//devtools/projects/ng-devtools",
-        "//devtools/projects/ng-devtools-backend",
-        "//devtools/projects/ng-devtools-backend/src/lib:highlighter",
-        "//devtools/projects/ng-devtools-backend/src/lib/component-tree",
-        "//devtools/projects/protocol",
-        "//devtools/projects/shell-browser/src/app:backend",
-        "//devtools/projects/shell-browser/src/app:background",
+    interop_deps = [
         "//packages/core",
         "//packages/platform-browser",
         "//packages/platform-browser/animations",
-        "@npm//@angular/cdk",
-        "@npm//@angular/material",
-        "@npm//rxjs",
+    ],
+    deps = [
+        ":chrome_application_environment_rjs",
+        ":chrome_application_operations_rjs",
+        ":zone_aware_chrome_message_bus_rjs",
+        "//:node_modules/@angular/cdk",
+        "//:node_modules/@angular/material",
+        "//:node_modules/@types/chrome",
+        "//:node_modules/rxjs",
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/projects/ng-devtools-backend:ng-devtools-backend_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib:highlighter_rjs",
+        "//devtools/projects/ng-devtools-backend/src/lib/component-tree:component-tree_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+        "//devtools/projects/shell-browser/src/app:backend_rjs",
+        "//devtools/projects/shell-browser/src/app:background_rjs",
     ],
 )
 

devtools/src/BUILD.bazel

@@ -1,7 +1,7 @@
 load("@aspect_bazel_lib//lib:copy_to_directory.bzl", "copy_to_directory")
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 load("//devtools/tools/esbuild:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 load("//tools:defaults.bzl", "esbuild", "http_server")
 
@@ -38,18 +38,19 @@ copy_to_directory(
     },
 )
 
-ng_module(
+ng_project(
     name = "demo",
     srcs = ["main.ts"],
-    deps = [
-        "//devtools/src/app",
+    interop_deps = [
         "//packages/common",
         "//packages/common/http",
         "//packages/core",
         "//packages/core/src/util",
         "//packages/platform-browser",
-        "@npm//@types",
-        "@npm//rxjs",
+    ],
+    deps = [
+        "//:node_modules/rxjs",
+        "//devtools/src/app:app_rjs",
     ],
 )
 
@@ -99,37 +100,37 @@ http_server(
     ],
 )
 
-ng_module(
+ng_project(
     name = "demo_application_environment",
     srcs = ["demo-application-environment.ts"],
     deps = [
-        "//devtools/projects/ng-devtools",
-        "//devtools/src/environments",
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/src/environments:environments_rjs",
     ],
 )
 
-ng_module(
+ng_project(
     name = "demo_application_operations",
     srcs = ["demo-application-operations.ts"],
     deps = [
-        "//devtools/projects/ng-devtools",
-        "//devtools/projects/protocol",
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 
-ng_module(
+ng_project(
     name = "iframe_message_bus",
     srcs = ["iframe-message-bus.ts"],
     deps = [
-        "//devtools/projects/protocol",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )
 
-ng_module(
+ng_project(
     name = "zone-unaware-iframe_message_bus",
     srcs = ["zone-unaware-iframe-message-bus.ts"],
     deps = [
-        ":iframe_message_bus",
-        "//devtools/projects/protocol",
+        ":iframe_message_bus_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
     ],
 )

devtools/src/app/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "app.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "app",
     srcs = [
         "app.component.ts",
@@ -18,15 +18,17 @@ ng_module(
         "app.component.html",
         ":app_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools",
-        "//devtools/src:demo_application_environment",
-        "//devtools/src:demo_application_operations",
-        "//devtools/src/app/demo-app",
-        "//devtools/src/app/devtools-app",
+    interop_deps = [
         "//packages/core",
         "//packages/platform-browser",
         "//packages/platform-browser/animations",
         "//packages/router",
     ],
+    deps = [
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/src:demo_application_environment_rjs",
+        "//devtools/src:demo_application_operations_rjs",
+        "//devtools/src/app/demo-app:demo-app_rjs",
+        "//devtools/src/app/devtools-app:devtools-app_rjs",
+    ],
 )

devtools/src/app/demo-app/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -37,7 +37,7 @@ sass_binary(
     ],
 )
 
-ng_module(
+ng_project(
     name = "demo-app",
     srcs = [
         "demo-app.component.ts",
@@ -53,12 +53,14 @@ ng_module(
         "zippy.component.html",
         ":demo_app_component_styles",
     ] + _STYLE_LABELS,
-    deps = [
-        "//devtools/projects/ng-devtools-backend",
-        "//devtools/src:zone-unaware-iframe_message_bus",
-        "//devtools/src/app/demo-app/todo",
+    interop_deps = [
         "//packages/core",
         "//packages/elements",
         "//packages/router",
     ],
+    deps = [
+        "//devtools/projects/ng-devtools-backend:ng-devtools-backend_rjs",
+        "//devtools/src:zone-unaware-iframe_message_bus_rjs",
+        "//devtools/src/app/demo-app/todo:todo_rjs",
+    ],
 )

devtools/src/app/demo-app/todo/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "app-todo.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "todo",
     srcs = [
         "app.module.ts",
@@ -20,14 +20,16 @@ ng_module(
         "dialog.component.html",
         ":app_todo_component_styles",
     ],
-    deps = [
-        "//devtools/src/app/demo-app/todo/about",
-        "//devtools/src/app/demo-app/todo/home",
-        "//devtools/src/app/demo-app/todo/routes",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/forms",
         "//packages/router",
-        "@npm//@angular/material",
+    ],
+    deps = [
+        "//:node_modules/@angular/material",
+        "//devtools/src/app/demo-app/todo/about:about_rjs",
+        "//devtools/src/app/demo-app/todo/home:home_rjs",
+        "//devtools/src/app/demo-app/todo/routes:routes_rjs",
     ],
 )

devtools/src/app/demo-app/todo/about/BUILD.bazel

@@ -1,14 +1,14 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "about",
     srcs = [
         "about.component.ts",
         "about.routes.ts",
     ],
-    deps = [
+    interop_deps = [
         "//packages/core",
         "//packages/router",
     ],

devtools/src/app/demo-app/todo/home/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "todo.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "home",
     srcs = [
         "home.routes.ts",
@@ -25,7 +25,7 @@ ng_module(
         "todo.component.html",
         ":home_styles",
     ],
-    deps = [
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/router",

devtools/src/app/demo-app/todo/routes/BUILD.bazel

@@ -1,14 +1,14 @@
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
-ng_module(
+ng_project(
     name = "routes",
     srcs = [
         "routes.component.ts",
         "routes.module.ts",
     ],
-    deps = [
+    interop_deps = [
         "//packages/core",
         "//packages/router",
     ],

devtools/src/app/devtools-app/BUILD.bazel

@@ -1,5 +1,5 @@
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//devtools/tools:ng_module.bzl", "ng_module")
+load("//devtools/tools:ng_project.bzl", "ng_project")
 
 package(default_visibility = ["//visibility:public"])
 
@@ -8,7 +8,7 @@ sass_binary(
     src = "devtools-app.component.scss",
 )
 
-ng_module(
+ng_project(
     name = "devtools-app",
     srcs = [
         "devtools-app.component.ts",
@@ -18,13 +18,15 @@ ng_module(
         "devtools-app.component.html",
         ":devtools_app_component_styles",
     ],
-    deps = [
-        "//devtools/projects/ng-devtools",
-        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager",
-        "//devtools/projects/protocol",
-        "//devtools/src:iframe_message_bus",
+    interop_deps = [
         "//packages/common",
         "//packages/core",
         "//packages/router",
     ],
+    deps = [
+        "//devtools/projects/ng-devtools:ng-devtools_rjs",
+        "//devtools/projects/ng-devtools/src/lib/application-services:frame_manager_rjs",
+        "//devtools/projects/protocol:protocol_rjs",
+        "//devtools/src:iframe_message_bus_rjs",
+    ],
 )

devtools/tools/ng_module.bzl

@@ -1,10 +0,0 @@
-load("//tools:defaults.bzl", _ng_module = "ng_module")
-
-def ng_module(name, tsconfig = "//devtools:tsconfig.json", srcs = [], angular_assets = [], **kwargs):
-    _ng_module(
-        name = name,
-        tsconfig = tsconfig,
-        srcs = srcs,
-        assets = angular_assets,
-        **kwargs
-    )

devtools/tools/ng_project.bzl

@@ -0,0 +1,15 @@
+load("//tools:defaults2.bzl", _ng_project = "ng_project")
+
+def ng_project(name, srcs = [], angular_assets = [], **kwargs):
+    deps = kwargs.pop("deps", []) + [
+        "//:node_modules/tslib",
+    ]
+
+    _ng_project(
+        name = name,
+        tsconfig = "//devtools:tsconfig_build",
+        srcs = srcs,
+        assets = angular_assets,
+        deps = deps,
+        **kwargs
+    )

devtools/tsconfig.json

@@ -14,6 +14,7 @@
     "importHelpers": true,
     "target": "es2020",
     "lib": ["es2020", "dom", "dom.iterable"],
+    "types": ["chrome"],
     "paths": {
       "@angular/*": [
         "../packages/*",