build: remove remaining @npm// usages

Removes remaining `@npm//` usages.

Author: devversion

WORKSPACE

@@ -125,37 +125,13 @@ yarn_install(
     yarn_lock = "//:yarn.lock",
 )
 
-load("@npm//@bazel/protractor:package.bzl", "npm_bazel_protractor_dependencies")
-
-npm_bazel_protractor_dependencies()
-
-# Setup web testing. We need to setup a browser because the web testing rules for TypeScript need
-# a reference to a registered browser (ideally that's a hermetic version of a browser)
-load("@io_bazel_rules_webtesting//web:repositories.bzl", "web_test_repositories")
-
-web_test_repositories()
-
 # Setup the Sass rule repositories.
 load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
 
 sass_repositories(
     yarn_script = "//:.yarn/releases/yarn-1.22.17.cjs",
 )
 
-# Setup repositories for browsers provided by the shared dev-infra package.
-load(
-    "@npm//@angular/build-tooling/bazel/browsers:browser_repositories.bzl",
-    _dev_infra_browser_repositories = "browser_repositories",
-)
-
-_dev_infra_browser_repositories()
-
-load("@build_bazel_rules_nodejs//toolchains/esbuild:esbuild_repositories.bzl", "esbuild_repositories")
-
-esbuild_repositories(
-    npm_repository = "npm",
-)
-
 load("@aspect_rules_js//npm:repositories.bzl", "npm_translate_lock")
 
 npm_translate_lock(

src/BUILD.bazel

@@ -1,5 +1,4 @@
-load("@npm//@bazel/concatjs:index.bzl", "ts_config")
-load("@aspect_rules_ts//ts:defs.bzl", rules_js_tsconfig = "ts_config")
+load("@aspect_rules_ts//ts:defs.bzl", "ts_config")
 load("@aspect_bazel_lib//lib:copy_to_bin.bzl", "copy_to_bin")
 load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
 load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", "MATERIAL_TESTING_ENTRYPOINTS")
@@ -23,16 +22,6 @@ exports_files([
     "README.md",
 ])
 
-ts_config(
-    name = "tsconfig-test",
-    src = "bazel-tsconfig-test.json",
-    deps = [
-        "bazel-tsconfig-build.json",
-        "//:node_modules/@types/jasmine",
-        "//:node_modules/@types/node",
-    ],
-)
-
 copy_to_bin(
     name = "package_json",
     srcs = ["package.json"],
@@ -67,24 +56,25 @@ ts_project(
     srcs = ["dev-mode-types.d.ts"],
 )
 
-ts_config(
-    name = "tsec_config",
-    src = "tsconfig-tsec.json",
-    deps = [
-        ":bazel-tsconfig-build.json",
-        "//goldens:tsec-exemption.json",
-    ],
-)
+# TODO(devversion): Look into a replacement.
+#ts_config(
+#    name = "tsec_config",
+#    src = "tsconfig-tsec.json",
+#    deps = [
+#        ":bazel-tsconfig-build.json",
+#        "//goldens:tsec-exemption.json",
+#    ],
+#)
 
-rules_js_tsconfig(
+ts_config(
     name = "build-tsconfig",
     src = "bazel-tsconfig-build.json",
     deps = [
         "//:node_modules/tslib",
     ],
 )
 
-rules_js_tsconfig(
+ts_config(
     name = "test-tsconfig",
     src = "bazel-tsconfig-test.json",
     deps = [

src/dev-app/BUILD.bazel

@@ -1,8 +1,8 @@
-load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
 load("//tools:defaults.bzl", "sass_binary")
 load("//tools:defaults2.bzl", "http_server", "ng_project")
 load("@npm2//:defs.bzl", "npm_link_all_packages")
 load("@aspect_rules_esbuild//esbuild:defs.bzl", "esbuild")
+load("@aspect_rules_js//npm:defs.bzl", "npm_package")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 
 package(default_visibility = ["//visibility:public"])
@@ -154,21 +154,17 @@ filegroup(
         ":theme",
         ":theme_m3",
         ":variables",
+        "//:node_modules/moment",
+        "//:node_modules/zone.js",
         "//src/dev-app/icon:icon_demo_assets",
-        "@npm//:node_modules/moment/min/moment-with-locales.min.js",
-        "@npm//:node_modules/rxjs/bundles/rxjs.umd.min.js",
-        "@npm//:node_modules/zone.js/bundles/zone.umd.js",
     ],
 )
 
 http_server(
     name = "devserver",
     srcs = [":dev_app_static_files"],
     additional_root_paths = [
-        "npm/node_modules",
-        # Needed for compatibility with "pkg_web" which always uses the tree
-        # artifact output as workspace root.
-        "angular_material",
+        "angular_material/",
     ],
     enable_dev_ui = True,
     # List of environment variables that will be made available as `window.<NAME>` in the
@@ -185,14 +181,20 @@ http_server(
 
 # Target that builds a static web package of the dev-app. The web package can be
 # deployed on static hosting services (such as firebase).
-pkg_web(
+npm_package(
     name = "web_package",
     srcs = [
         ":bundles",
         ":dev_app_static_files",
     ],
-    additional_root_paths = [
-        "npm/node_modules",
+    out = "web_package",
+    exclude_srcs_patterns = [
+        "node_modules/.aspect_rules_js/**",
+    ],
+    include_srcs_packages = ["**"],
+    root_paths = [
+        ".",
+        "",
     ],
     tags = ["manual"],
 )

src/dev-app/index.html

@@ -1,29 +1,38 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Angular Material</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Angular Material</title>
+    <base href="/" />
 
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined"
+      rel="stylesheet"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
 
-  <!-- FontAwesome for mat-icon demo. -->
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-</head>
-<body>
-  <dev-app>Loading...</dev-app>
-  <script src="zone.js/bundles/zone.umd.js"></script>
-  <script src="bundles/dev-app/main.js" type="module"></script>
-  <script>
-    (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-      v: "weekly",
-      key: window.GOOGLE_MAPS_KEY || 'invalid'
-    });
-  </script>
-</body>
+    <!-- FontAwesome for mat-icon demo. -->
+    <link
+      rel="stylesheet"
+      href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+    />
+  </head>
+  <body>
+    <dev-app>Loading...</dev-app>
+    <script src="node_modules/zone.js/bundles/zone.umd.js"></script>
+    <script src="bundles/dev-app/main.js" type="module"></script>
+    <script>
+      (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
+        v: "weekly",
+        key: window.GOOGLE_MAPS_KEY || 'invalid'
+      });
+    </script>
+  </body>
 </html>

src/universal-app/BUILD.bazel

@@ -144,10 +144,10 @@ http_server(
     name = "server",
     srcs = [
         ":debug_prerender_bin",
-        "@npm//zone.js",
+        "//:node_modules/zone.js",
     ],
     additional_root_paths = [
-        "npm/node_modules",
+        "angular_material/",
     ],
     tags = ["manual"],
     deps = [

src/universal-app/index-source.html

@@ -1,21 +1,24 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Angular Material Universal Kitchen Sink Test</title>
-  <link href="styles.css" rel="stylesheet">
-  <link rel="preconnect" href="https://fonts.gstatic.com">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <base href="/">
-</head>
-<body class="mat-app-background mat-typography">
-  <kitchen-sink>Loading...</kitchen-sink>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Angular Material Universal Kitchen Sink Test</title>
+    <link href="styles.css" rel="stylesheet" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap"
+      rel="stylesheet"
+    />
+    <base href="/" />
+  </head>
+  <body class="mat-app-background mat-typography">
+    <kitchen-sink>Loading...</kitchen-sink>
 
-  <script src="zone.js/bundles/zone.umd.min.js"></script>
-  <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
-  <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
-  <script src="client_bundle/main.js" type="module"></script>
-</body>
+    <script src="node_modules/zone.js/bundles/zone.umd.min.js"></script>
+    <script src="https://maps.googleapis.com/maps/api/js?libraries=visualization"></script>
+    <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>
+    <script src="client_bundle/main.js" type="module"></script>
+  </body>
 </html>