build: update to rules_nodejs v4.0.0-beta.0

Updates the Bazel NodeJS rules to v4.0.0-beta.0. This is necessary
so that the Angular components repo can start using the new API
golden tool from the shared dev-infra repository, and it's generally
good to stay as up-to-date as possible with the Bazel rules as it's
easy to fall behind, and updating early allows us to discover issues
affecting our tooling earlier (where they are easier to address due to
e.g. potential breaking change policy).

bazel-contrib/rules_nodejs@3be2902.

As part of this change, we remove all manual `module_name`
properties from `ts_library` and `ng_module` targets. These
will be generated now as manually setting the module name is
rather prone to mistakes and this way it also integrates better
with the new `package_name` property introduced as part of
Rules NodeJS v4. This change reveiled that we set a module name
for the private `material/testing` folder. This folder no longer
will resolve through `@angular/material` and needs to be imported
through a relative path.

Author: devversion

WORKSPACE

@@ -8,8 +8,8 @@ load("@bazel_tools//tools/build_defs/repo:http.bzl", "http_archive")
 # Add NodeJS rules
 http_archive(
     name = "build_bazel_rules_nodejs",
-    sha256 = "10f534e1c80f795cffe1f2822becd4897754d18564612510c59b3c73544ae7c6",
-    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/3.5.0/rules_nodejs-3.5.0.tar.gz"],
+    sha256 = "5c40083120eadec50a3497084f99bc75a85400ea727e82e0b2f422720573130f",
+    urls = ["https://github.com/bazelbuild/rules_nodejs/releases/download/4.0.0-beta.0/rules_nodejs-4.0.0-beta.0.tar.gz"],
 )
 
 # Add sass rules
@@ -77,10 +77,17 @@ load("@io_bazel_rules_sass//:package.bzl", "rules_sass_dependencies")
 
 rules_sass_dependencies()
 
-# Setup the Sass rule repositories.
-load("@io_bazel_rules_sass//:defs.bzl", "sass_repositories")
-
-sass_repositories()
+# TODO(devversion): remove workaround once `rules_sass` supports v4 of the Bazel NodeJS rules,
+# or when https://github.com/bazelbuild/rules_nodejs/issues/2807 is solved. For now, we just
+# replicate the original `sass_repositories` call and manually add the `--ignore-scripts`
+# Yarn argument to not run the postinstall version check of `@bazel/worker`
+yarn_install(
+    name = "build_bazel_rules_sass_deps",
+    args = ["--ignore-scripts"],
+    package_json = "@io_bazel_rules_sass//sass:package.json",
+    symlink_node_modules = False,
+    yarn_lock = "@io_bazel_rules_sass//sass:yarn.lock",
+)
 
 # Setup repositories for browsers provided by the shared dev-infra package.
 load(

package.json

@@ -75,26 +75,26 @@
     "@angular-devkit/build-optimizer": "^0.1201.0",
     "@angular-devkit/core": "^12.1.0",
     "@angular-devkit/schematics": "^12.1.0",
-    "@angular/bazel": "^12.1.0",
+    "@angular/bazel": "https://github.com/angular/bazel-builds.git#2566cc859235399edc72749a957f1cdcba2dc121",
     "@angular/compiler-cli": "^12.1.0",
-    "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#7b783ae5493d40941fbe48f766b9e4ac1b214f42",
+    "@angular/dev-infra-private": "https://github.com/angular/dev-infra-private-builds.git#0057daca63205a10c26256b6733b02af835497c0",
     "@angular/localize": "^12.1.0",
     "@angular/platform-browser-dynamic": "^12.1.0",
     "@angular/platform-server": "^12.1.0",
     "@angular/router": "^12.1.0",
     "@axe-core/webdriverjs": "^4.1.0",
     "@babel/core": "^7.13.10",
     "@babel/traverse": "^7.13.0",
-    "@bazel/bazelisk": "1.7.5",
+    "@bazel/bazelisk": "1.9.0",
     "@bazel/buildifier": "4.0.1",
-    "@bazel/concatjs": "3.5.0",
-    "@bazel/ibazel": "0.15.8",
-    "@bazel/jasmine": "3.5.0",
-    "@bazel/protractor": "3.5.0",
-    "@bazel/rollup": "3.5.0",
-    "@bazel/runfiles": "3.5.0",
-    "@bazel/terser": "3.5.0",
-    "@bazel/typescript": "3.5.0",
+    "@bazel/concatjs": "4.0.0-beta.0",
+    "@bazel/ibazel": "0.15.10",
+    "@bazel/jasmine": "4.0.0-beta.0",
+    "@bazel/protractor": "4.0.0-beta.0",
+    "@bazel/rollup": "4.0.0-beta.0",
+    "@bazel/runfiles": "4.0.0-beta.0",
+    "@bazel/terser": "4.0.0-beta.0",
+    "@bazel/typescript": "4.0.0-beta.0",
     "@firebase/app-types": "^0.6.1",
     "@material/animation": "12.0.0-canary.22d29cbb4.0",
     "@material/auto-init": "12.0.0-canary.22d29cbb4.0",

src/cdk-experimental/BUILD.bazel

@@ -9,7 +9,6 @@ ts_library(
         ["*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental",
     deps = ["@npm//@angular/core"],
 )
 

src/cdk-experimental/column-resize/BUILD.bazel

@@ -8,7 +8,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/column-resize",
     deps = [
         "//src/cdk-experimental/popover-edit",
         "//src/cdk/bidi",

src/cdk-experimental/combobox/BUILD.bazel

@@ -8,7 +8,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/combobox",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",

src/cdk-experimental/combobox/combobox.spec.ts

@@ -13,7 +13,7 @@ import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {CdkComboboxModule} from './combobox-module';
 import {CdkCombobox} from './combobox';
-import {dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing/private';
+import {dispatchKeyboardEvent, dispatchMouseEvent} from '../../cdk/testing/private';
 import {
   AriaHasPopupValue,
   CdkComboboxPanel} from '@angular/cdk-experimental/combobox/combobox-panel';

src/cdk-experimental/dialog/BUILD.bazel

@@ -9,7 +9,6 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     assets = [":dialog-container.css"] + glob(["**/*.html"]),
-    module_name = "@angular/cdk-experimental/dialog",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",

src/cdk-experimental/dialog/dialog.spec.ts

@@ -30,7 +30,7 @@ import {
   dispatchKeyboardEvent,
   createKeyboardEvent,
   dispatchEvent,
-} from '@angular/cdk/testing/private';
+} from '../../cdk/testing/private';
 import {DIALOG_DATA, Dialog, DialogModule, DialogRef} from './index';
 
 describe('Dialog', () => {

src/cdk-experimental/listbox/BUILD.bazel

@@ -8,7 +8,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/listbox",
     deps = [
         "//src/cdk-experimental/combobox",
         "//src/cdk/a11y",

src/cdk-experimental/listbox/listbox.spec.ts

@@ -13,7 +13,7 @@ import {
   createKeyboardEvent,
   dispatchKeyboardEvent,
   dispatchMouseEvent
-} from '@angular/cdk/testing/private';
+} from '../../cdk/testing/private';
 import {A, DOWN_ARROW, END, HOME, SPACE} from '@angular/cdk/keycodes';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CdkCombobox, CdkComboboxModule, CdkComboboxPanel} from '@angular/cdk-experimental/combobox';

src/cdk-experimental/menu/BUILD.bazel

@@ -8,7 +8,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/menu",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",

src/cdk-experimental/menu/context-menu.spec.ts

@@ -3,7 +3,7 @@ import {CdkMenuModule} from './menu-module';
 import {TestBed, waitForAsync, ComponentFixture} from '@angular/core/testing';
 import {CdkMenu} from './menu';
 import {CdkContextMenuTrigger} from './context-menu';
-import {dispatchMouseEvent} from '@angular/cdk/testing/private';
+import {dispatchMouseEvent} from '../../cdk/testing/private';
 import {By} from '@angular/platform-browser';
 import {CdkMenuItem} from './menu-item';
 import {CdkMenuItemTrigger} from './menu-item-trigger';

src/cdk-experimental/menu/menu-bar.spec.ts

@@ -28,7 +28,7 @@ import {
   createKeyboardEvent,
   dispatchEvent,
   dispatchMouseEvent,
-} from '@angular/cdk/testing/private';
+} from '../../cdk/testing/private';
 import {CdkMenuBar} from './menu-bar';
 import {CdkMenuModule} from './menu-module';
 import {CdkMenuItemRadio} from './menu-item-radio';

src/cdk-experimental/menu/menu-item-trigger.spec.ts

@@ -1,7 +1,7 @@
 import {Component, ViewChildren, QueryList, ElementRef, ViewChild, Type} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
-import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
+import {dispatchKeyboardEvent} from '../../cdk/testing/private';
 import {TAB, SPACE} from '@angular/cdk/keycodes';
 import {CdkMenuModule} from './menu-module';
 import {CdkMenuItem} from './menu-item';

src/cdk-experimental/menu/menu.spec.ts

@@ -13,7 +13,7 @@ import {
   dispatchMouseEvent,
   createMouseEvent,
   dispatchEvent,
-} from '@angular/cdk/testing/private';
+} from '../../cdk/testing/private';
 import {By} from '@angular/platform-browser';
 import {CdkMenu} from './menu';
 import {CdkMenuModule} from './menu-module';

src/cdk-experimental/menu/pointer-focus-tracker.spec.ts

@@ -1,6 +1,6 @@
 import {Component, QueryList, ElementRef, ViewChildren, AfterViewInit} from '@angular/core';
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
-import {createMouseEvent, dispatchEvent} from '@angular/cdk/testing/private';
+import {createMouseEvent, dispatchEvent} from '../../cdk/testing/private';
 import {Observable} from 'rxjs';
 import {FocusableElement, PointerFocusTracker} from './pointer-focus-tracker';
 

src/cdk-experimental/popover-edit/BUILD.bazel

@@ -8,7 +8,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/popover-edit",
     deps = [
         "//src/cdk/a11y",
         "//src/cdk/bidi",

src/cdk-experimental/popover-edit/popover-edit.spec.ts

@@ -1,7 +1,7 @@
 import {DataSource} from '@angular/cdk/collections';
 import {LEFT_ARROW, UP_ARROW, RIGHT_ARROW, DOWN_ARROW, TAB} from '@angular/cdk/keycodes';
 import {CdkTableModule} from '@angular/cdk/table';
-import {dispatchKeyboardEvent} from '@angular/cdk/testing/private';
+import {dispatchKeyboardEvent} from '../../cdk/testing/private';
 import {CommonModule} from '@angular/common';
 import {Component, Directive, ElementRef, ViewChild} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed, tick, inject} from '@angular/core/testing';

src/cdk-experimental/scrolling/BUILD.bazel

@@ -9,7 +9,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/scrolling",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/coercion",

src/cdk-experimental/selection/BUILD.bazel

@@ -8,7 +8,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/selection",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/coercion",

src/cdk-experimental/table-scroll-container/BUILD.bazel

@@ -13,7 +13,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk-experimental/table-scroll-container",
     deps = [
         "//src/cdk/bidi",
         "//src/cdk/platform",

src/cdk-experimental/tsconfig-tests.json

@@ -1,6 +1,10 @@
 {
   "extends": "../bazel-tsconfig-build.json",
+  "references": [
+    {"path": "../cdk/tsconfig-tests.json"}
+  ],
   "compilerOptions": {
+    "composite": true,
     "baseUrl": ".",
     "outDir": "../../dist/packages/cdk-experimental",
     "rootDir": ".",
@@ -20,8 +24,7 @@
     }
   },
   "include": [
-    "**/index.ts",
-    "**/*.spec.ts",
+    "**/*.ts",
     "../dev-mode-types.d.ts"
   ],
   "exclude": [

src/cdk/BUILD.bazel

@@ -9,7 +9,6 @@ ts_library(
         ["*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk",
     deps = ["@npm//@angular/core"],
 )
 

src/cdk/a11y/BUILD.bazel

@@ -16,7 +16,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/a11y",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/coercion",

src/cdk/a11y/focus-monitor/focus-monitor.spec.ts

@@ -6,7 +6,7 @@ import {
   patchElementFocus,
   createMouseEvent,
   dispatchEvent,
-} from '@angular/cdk/testing/private';
+} from '../../testing/private';
 import {DOCUMENT} from '@angular/common';
 import {Component, NgZone} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, inject, TestBed, tick} from '@angular/core/testing';

src/cdk/a11y/focus-trap/event-listener-inert-strategy.spec.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ElementRef, Type, ViewChild, Provider} from '@angular/core';
 import {ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
-import {patchElementFocus} from '@angular/cdk/testing/private';
+import {patchElementFocus} from '../../testing/private';
 import {
   A11yModule,
   ConfigurableFocusTrapFactory,

src/cdk/a11y/input-modality/input-modality-detector.spec.ts

@@ -8,7 +8,7 @@ import {
   dispatchTouchEvent,
   dispatchEvent,
   createTouchEvent,
-} from '@angular/cdk/testing/private';
+} from '../../testing/private';
 import {fakeAsync, TestBed, tick} from '@angular/core/testing';
 import {
   InputModality,

src/cdk/a11y/key-manager/list-key-manager.spec.ts

@@ -1,5 +1,5 @@
 import {DOWN_ARROW, END, HOME, LEFT_ARROW, RIGHT_ARROW, TAB, UP_ARROW} from '@angular/cdk/keycodes';
-import {createKeyboardEvent} from '@angular/cdk/testing/private';
+import {createKeyboardEvent} from '../../testing/private';
 import {QueryList} from '@angular/core';
 import {fakeAsync, tick} from '@angular/core/testing';
 import {take} from 'rxjs/operators';

src/cdk/accordion/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/accordion",
     deps = [
         "//src/cdk/coercion",
         "//src/cdk/collections",

src/cdk/bidi/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/bidi",
     deps = [
         "@npm//@angular/common",
         "@npm//@angular/core",

src/cdk/clipboard/BUILD.bazel

@@ -9,7 +9,6 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     assets = glob(["**/*.html"]),
-    module_name = "@angular/cdk/clipboard",
     deps = [
         "@npm//@angular/core",
         "@npm//rxjs",

src/cdk/coercion/BUILD.bazel

@@ -8,7 +8,6 @@ ts_library(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/coercion",
     deps = [
         "@npm//@angular/core",
     ],

src/cdk/collections/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/collections",
     deps = [
         "//src:dev_mode_types",
         "@npm//@angular/core",

src/cdk/drag-drop/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/drag-drop",
     deps = [
         "//src:dev_mode_types",
         "//src/cdk/a11y",

src/cdk/drag-drop/directives/drag.spec.ts

@@ -6,7 +6,7 @@ import {
   dispatchMouseEvent,
   dispatchTouchEvent,
   dispatchFakeEvent,
-} from '@angular/cdk/testing/private';
+} from '../../testing/private';
 import {
   AfterViewInit,
   ChangeDetectionStrategy,

src/cdk/drag-drop/drag-drop-registry.spec.ts

@@ -6,7 +6,7 @@ import {
   createTouchEvent,
   dispatchTouchEvent,
   dispatchFakeEvent,
-} from '@angular/cdk/testing/private';
+} from '../testing/private';
 import {DragDropRegistry} from './drag-drop-registry';
 import {DragDropModule} from './drag-drop-module';
 

src/cdk/keycodes/BUILD.bazel

@@ -12,7 +12,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/keycodes",
 )
 
 ts_library(

src/cdk/keycodes/modifiers.spec.ts

@@ -1,4 +1,4 @@
-import {createKeyboardEvent} from '@angular/cdk/testing/private';
+import {createKeyboardEvent} from '../testing/private';
 import {hasModifierKey} from './modifiers';
 
 describe('keyboard modifiers', () => {

src/cdk/layout/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/layout",
     deps = [
         "//src/cdk/coercion",
         "//src/cdk/platform",

src/cdk/observers/BUILD.bazel

@@ -14,7 +14,6 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/cdk/observers",
     deps = [
         "//src/cdk/coercion",
         "@npm//@angular/core",