build: update bazel setup to latest dev-infra and rules_nodejs version (#23973)

Updates the Bazel setup to the latest dev-infra and rules_nodejs
version. This includes:

* The removal of the spec-bundling code as that has been moved over to
  the shared dev-infra code.

* The remoal of the AMD esbuild and devmode JS source extraction as
  these rules have been moved to the shared dev-infra logic.

* The removal of the Angular linker ESBuild plugin creation as this
  logic is now exposed as shared script in the shared dev-infra package.

Author: devversion

.github/workflows/dev-infra.yml

@@ -9,6 +9,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: angular/dev-infra/github-actions/commit-message-based-labels@589f402fa601c4c8ab006bdfb337564b3ea32338
+      - uses: angular/dev-infra/github-actions/commit-message-based-labels@f0f363cb4ce5b5faf14e3d3bb7eeb7c7aee72da7
         with:
           angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }}

.github/workflows/lock-closed.yml

@@ -9,6 +9,6 @@ jobs:
   lock_closed:
     runs-on: ubuntu-latest
     steps:
-      - uses: angular/dev-infra/github-actions/lock-closed@3f4646c252bc54b2ae93b4e322ebde9030de30b2
+      - uses: angular/dev-infra/github-actions/lock-closed@f0f363cb4ce5b5faf14e3d3bb7eeb7c7aee72da7
         with:
           lock-bot-key: ${{ secrets.LOCK_BOT_PRIVATE_KEY }}

WORKSPACE

@@ -9,8 +9,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 http_archive(
     name = "build_bazel_rules_nodejs",
     patches = ["//tools:multiple-node-versions.patch"],
-    sha256 = "3635797a96c7bfcd0d265dacd722a07335e64d6ded9834af8d3f1b7ba5a25bba",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.3.0/rules_nodejs-4.3.0.tar.gz"],
+    sha256 = "f7037c8e295fdc921f714962aee7c496110052511e2b14076bd8e2d46bc9819c",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.4.5/rules_nodejs-4.4.5.tar.gz"],
 )
 
 # Add sass rules

package.json

@@ -72,24 +72,24 @@
     "@angular/bazel": "13.0.1",
     "@angular/cli": "13.0.2",
     "@angular/compiler-cli": "13.0.1",
-    "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#2cfe4b98a157927b319a3a00b467ff6233dc3337",
+    "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#c55a3937d45945489714273bfbbe9b803ceff89e",
     "@angular/localize": "13.0.1",
     "@angular/platform-browser-dynamic": "13.0.1",
     "@angular/platform-server": "13.0.1",
     "@angular/router": "13.0.1",
     "@axe-core/webdriverjs": "^4.1.0",
     "@babel/core": "^7.16.0",
     "@bazel/bazelisk": "1.10.1",
-    "@bazel/buildifier": "4.2.1",
-    "@bazel/concatjs": "4.3.0",
-    "@bazel/esbuild": "4.3.0",
+    "@bazel/buildifier": "4.2.3",
+    "@bazel/concatjs": "4.4.5",
+    "@bazel/esbuild": "4.4.5",
     "@bazel/ibazel": "0.15.10",
-    "@bazel/jasmine": "4.2.0",
-    "@bazel/protractor": "4.3.0",
-    "@bazel/rollup": "4.3.0",
-    "@bazel/runfiles": "4.3.0",
-    "@bazel/terser": "4.3.0",
-    "@bazel/typescript": "4.3.0",
+    "@bazel/jasmine": "4.4.5",
+    "@bazel/protractor": "4.4.5",
+    "@bazel/rollup": "4.4.5",
+    "@bazel/runfiles": "4.4.5",
+    "@bazel/terser": "4.4.5",
+    "@bazel/typescript": "4.4.5",
     "@firebase/app-types": "^0.6.1",
     "@material/animation": "14.0.0-canary.1af7c1c4a.0",
     "@material/auto-init": "14.0.0-canary.1af7c1c4a.0",

scripts/create-legacy-tests-bundle.mjs

@@ -1,8 +1,6 @@
 #!/usr/bin/env node
 
-import {ConsoleLogger, LogLevel, NodeJSFileSystem} from '@angular/compiler-cli';
-import {createEs2015LinkerPlugin} from '@angular/compiler-cli/linker/babel';
-import {transformAsync} from '@babel/core';
+import {createLinkerEsbuildPlugin} from '@angular/dev-infra-private/shared-scripts/angular-linker/esbuild-plugin.mjs';
 import child_process from 'child_process';
 import esbuild from 'esbuild';
 import fs from 'fs';
@@ -37,7 +35,7 @@ async function main() {
   await compileProjectWithNgtsc();
 
   const specEntryPointFile = await createEntryPointSpecFile();
-  const esbuildLinkerPlugin = await createLinkerEsbuildPlugin();
+  const esbuildLinkerPlugin = await createLinkerEsbuildPlugin(/fesm2020/, false);
   const esbuildResolvePlugin = await createResolveEsbuildPlugin();
 
   const result = await esbuild.build({
@@ -175,33 +173,6 @@ async function createResolveEsbuildPlugin() {
   };
 }
 
-/** Creates an ESBuild plugin that runs the Angular linker on framework packages. */
-async function createLinkerEsbuildPlugin() {
-  const linkerBabelPlugin = createEs2015LinkerPlugin({
-    fileSystem: new NodeJSFileSystem(),
-    logger: new ConsoleLogger(LogLevel.warn),
-    // We enable JIT mode as unit tests also will rely on the linked ESM files.
-    linkerJitMode: true,
-  });
-
-  return {
-    name: 'ng-linker-esbuild',
-    setup: build => {
-      build.onLoad({filter: /fesm2020/}, async args => {
-        const filePath = args.path;
-        const content = await fs.promises.readFile(filePath, 'utf8');
-        const {code} = await transformAsync(content, {
-          filename: filePath,
-          filenameRelative: filePath,
-          plugins: [linkerBabelPlugin],
-          sourceMaps: 'inline',
-        });
-        return {contents: code};
-      });
-    },
-  };
-}
-
 /**
  * Retrieves the `fs.Stats` results for the given path gracefully.
  * If the file does not exist, returns `null`.

src/cdk/testing/tests/webdriver-test.bzl

@@ -1,7 +1,6 @@
-load("//tools:defaults.bzl", "jasmine_node_test")
+load("//tools:defaults.bzl", "jasmine_node_test", "spec_bundle")
 load("@io_bazel_rules_webtesting//web:web.bzl", "web_test")
 load("//tools/server-test:index.bzl", "server_test")
-load("//tools/spec-bundling:index.bzl", "spec_bundle")
 
 def webdriver_test(name, deps, tags = [], **kwargs):
     spec_bundle(

src/dev-app/BUILD.bazel

@@ -1,7 +1,6 @@
 load("@build_bazel_rules_nodejs//:index.bzl", "pkg_web")
-load("//tools:defaults.bzl", "ng_module", "sass_binary")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "ng_module", "sass_binary")
 load("//tools/dev-server:index.bzl", "dev_server")
-load("//tools/esbuild:index.bzl", "esbuild", "esbuild_config")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -111,7 +110,7 @@ esbuild_config(
     config_file = "esbuild.config.mjs",
 )
 
-esbuild(
+devmode_esbuild(
     name = "bundles",
     config = ":esbuild_config",
     entry_points = [":main.ts"] + ["%s:index.ts" % e for e in ALL_EXAMPLES],

src/e2e-app/BUILD.bazel

@@ -1,6 +1,5 @@
 load("//tools/dev-server:index.bzl", "dev_server")
-load("//tools:defaults.bzl", "ng_module", "sass_binary")
-load("//tools/esbuild:index.bzl", "esbuild", "esbuild_config")
+load("//tools:defaults.bzl", "devmode_esbuild", "esbuild_config", "ng_module", "sass_binary")
 load("//src/components-examples:config.bzl", "ALL_EXAMPLES")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
@@ -103,7 +102,7 @@ esbuild_config(
     config_file = "esbuild.config.mjs",
 )
 
-esbuild(
+devmode_esbuild(
     name = "bundles",
     testonly = True,
     config = ":esbuild_config",

src/universal-app/BUILD.bazel

@@ -3,8 +3,7 @@ load("//src/cdk:config.bzl", "CDK_TARGETS")
 load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_TARGETS")
 load("//src/material:config.bzl", "MATERIAL_TARGETS")
 load("//src/material-experimental:config.bzl", "MATERIAL_EXPERIMENTAL_TARGETS")
-load("//tools:defaults.bzl", "ng_module", "sass_binary", "ts_library")
-load("//tools/esbuild:index.bzl", "esbuild")
+load("//tools:defaults.bzl", "devmode_esbuild", "ng_module", "sass_binary", "ts_library")
 load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
 package(default_visibility = ["//visibility:public"])
@@ -56,7 +55,7 @@ sass_binary(
     ],
 )
 
-esbuild(
+devmode_esbuild(
     name = "server_bundle",
     entry_point = ":prerender.ts",
     platform = "node",

tools/angular/BUILD.bazel

@@ -1,23 +1,13 @@
-load("@build_bazel_rules_nodejs//:index.bzl", "js_library")
-load("//tools/esbuild:index.bzl", "esbuild_config")
+load("@npm//@angular/dev-infra-private/bazel/esbuild:index.bzl", "esbuild_config")
 load(":index.bzl", "create_angular_bundle_targets")
 
 package(default_visibility = ["//visibility:public"])
 
-js_library(
-    name = "create_linker_esbuild_plugin",
-    srcs = ["create_linker_esbuild_plugin.mjs"],
-    deps = [
-        "@npm//@angular/compiler-cli",
-        "@npm//@babel/core",
-    ],
-)
-
 esbuild_config(
     name = "esbuild_config",
     config_file = "esbuild.config.mjs",
     deps = [
-        ":create_linker_esbuild_plugin",
+        "@npm//@angular/dev-infra-private/shared-scripts/angular-linker:js_lib",
     ],
 )
 

tools/angular/create_linker_esbuild_plugin.mjs

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {createLinkerEsbuildPlugin} from './create_linker_esbuild_plugin.mjs';
+import {createLinkerEsbuildPlugin} from '@angular/dev-infra-private/shared-scripts/angular-linker/esbuild-plugin.mjs';
 
 export default {
   // Note: We support `.mjs` here as this is the extension used by Angular APF packages.

tools/angular/esbuild.config.mjs

@@ -1,5 +1,5 @@
 load("//:packages.bzl", "ANGULAR_PACKAGES")
-load("//tools/esbuild:index.bzl", "esbuild")
+load("@npm//@angular/dev-infra-private/bazel/esbuild:index.bzl", "esbuild")
 load("@build_bazel_rules_nodejs//internal/linker:link_node_modules.bzl", "LinkerPackageMappingInfo")
 load("@build_bazel_rules_nodejs//:providers.bzl", "ExternalNpmPackageInfo", "JSModuleInfo")
 

tools/angular/index.bzl

@@ -5,14 +5,17 @@ load("@build_bazel_rules_nodejs//:index.bzl", _pkg_npm = "pkg_npm")
 load("@io_bazel_rules_sass//:defs.bzl", _npm_sass_library = "npm_sass_library", _sass_binary = "sass_binary", _sass_library = "sass_library")
 load("@npm//@angular/bazel:index.bzl", _ng_module = "ng_module", _ng_package = "ng_package")
 load("@npm//@angular/dev-infra-private/bazel/integration:index.bzl", _integration_test = "integration_test")
+load("@npm//@angular/dev-infra-private/bazel/esbuild:index.bzl", _esbuild = "esbuild", _esbuild_config = "esbuild_config")
+load("@npm//@angular/dev-infra-private/bazel/spec-bundling:index.bzl", _spec_bundle = "spec_bundle")
+load("@npm//@angular/dev-infra-private/bazel:extract_js_module_output.bzl", "extract_js_module_output")
 load("@npm//@bazel/jasmine:index.bzl", _jasmine_node_test = "jasmine_node_test")
 load("@npm//@bazel/concatjs:index.bzl", _karma_web_test = "karma_web_test", _karma_web_test_suite = "karma_web_test_suite")
 load("@npm//@bazel/protractor:index.bzl", _protractor_web_test_suite = "protractor_web_test_suite")
 load("@npm//@bazel/typescript:index.bzl", _ts_library = "ts_library")
 load("//:packages.bzl", "NO_STAMP_NPM_PACKAGE_SUBSTITUTIONS", "NPM_PACKAGE_SUBSTITUTIONS")
 load("//:pkg-externals.bzl", "PKG_EXTERNALS")
 load("//tools/markdown-to-html:index.bzl", _markdown_to_html = "markdown_to_html")
-load("//tools/spec-bundling:index.bzl", "spec_bundle")
+load("//tools/angular:index.bzl", "LINKER_PROCESSED_FW_PACKAGES")
 
 _DEFAULT_TSCONFIG_BUILD = "//src:bazel-tsconfig-build.json"
 _DEFAULT_TSCONFIG_TEST = "//src:tsconfig-test"
@@ -25,6 +28,8 @@ npmPackageSubstitutions = select({
 # Re-exports to simplify build file load statements
 markdown_to_html = _markdown_to_html
 integration_test = _integration_test
+esbuild = _esbuild
+esbuild_config = _esbuild_config
 
 def _compute_module_name(testonly):
     current_pkg = native.package_name()
@@ -400,3 +405,57 @@ def ng_web_test_suite(deps = [], static_css = [], exclude_init_script = False, *
         bootstrap = bootstrap,
         **kwargs
     )
+
+def spec_bundle(name, deps, **kwargs):
+    # TODO: Rename once devmode and prodmode have been combined.
+    # For spec bundling we also only consume devmode output as it is ESM in this repository.
+    # This helps speeding up development experience as ESBuild (used internally by the rule)
+    # would request both devmode and prodmode output flavor (resulting in 2x TS compilations).
+    extract_js_module_output(
+        name = "%s_devmode_deps" % name,
+        deps = deps,
+        provider = "JSModuleInfo",
+        forward_linker_mappings = True,
+        include_external_npm_packages = True,
+        include_default_files = False,
+        include_declarations = False,
+        testonly = True,
+    )
+
+    _spec_bundle(
+        name = name,
+        # For specs, we always add the pre-processed linker FW packages so that these
+        # are resolved instead of the unprocessed FW entry-points through the `node_modules`.
+        deps = ["%s_devmode_deps" % name] + LINKER_PROCESSED_FW_PACKAGES,
+        workspace_name = "angular_material",
+        run_angular_linker = select({
+            # Pass through whether partial compilation is enabled or not. This is helpful
+            # for our integration tests which run all tests in partial compilation mode.
+            "//tools:partial_compilation_enabled": True,
+            "//conditions:default": False,
+        }),
+        **kwargs
+    )
+
+# TODO: Rename once devmode and prodmode have been combined.
+def devmode_esbuild(name, deps, testonly = False, **kwargs):
+    """Extension of the default `@bazel/esbuild` rule so that only devmode ESM output
+    is requested. This is done to speed up local development because the ESBuild rule
+    by default requests all possible output flavors/modes."""
+    extract_js_module_output(
+        name = "%s_devmode_deps" % name,
+        deps = deps,
+        testonly = testonly,
+        forward_linker_mappings = True,
+        include_external_npm_packages = True,
+        include_default_files = False,
+        include_declarations = False,
+        provider = "JSModuleInfo",
+    )
+
+    _esbuild(
+        name = name,
+        deps = ["%s_devmode_deps" % name],
+        testonly = testonly,
+        **kwargs
+    )