build: update to rules_nodejs v4.0.0-beta.0 and use new API golden tool [patch port] (#23180)

* 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.

* build: switch to API signature test tool from dev-infra

We recently introduced a new tool for testing the public API
signature of entry-points. This tool is part of the shared
dev-infra package and uses Microsoft's API extractor under the
hood. This commit sets up the new tool and removes ts-api-guardian.

* build: fix approve-api golden script

The API goldens have been flattened as part of 766b07e,
but the script for updating goldens has not been updated.

This commit fixes the script so that it respects the new file location
of goldens.

* build: remove leftover manual `module_name` definition

Removes a remaining instance of the Bazel `module_name`
property being set.

Author: devversion

.circleci/config.yml

@@ -220,7 +220,7 @@ jobs:
       - *slack_notify_on_failure
 
   # --------------------------------------------------------------------------------------------
-  # Job that runs ts-api-guardian against our API goldens in "tools/public_api_guard".
+  # Job that runs API golden tests in "tools/public_api_guard".
   # This job fails whenever an API has been updated but not explicitly approved through goldens.
   # --------------------------------------------------------------------------------------------
   api_golden_checks:

BUILD.bazel

@@ -8,6 +8,7 @@ package(default_visibility = ["//visibility:public"])
 
 exports_files([
     "LICENSE",
+    "package.json",
 ])
 
 genrule(

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.2952c6a76.0",
     "@material/auto-init": "12.0.0-canary.2952c6a76.0",
@@ -218,7 +218,6 @@
     "shelljs": "^0.8.3",
     "stylelint": "^13.8.0",
     "terser": "^4.8.0",
-    "ts-api-guardian": "^0.6.0",
     "ts-node": "^9.1.1",
     "tsickle": "0.39.1",
     "tslint": "^6.1.3",

scripts/approve-api-golden.js

@@ -3,24 +3,29 @@
 const shelljs = require('shelljs');
 const chalk = require('chalk');
 const path = require('path');
-const packageName = process.argv[2];
+const searchPackageName = process.argv[2];
 const {guessPackageName} = require('./util');
 
-if (!packageName) {
+if (!searchPackageName) {
   console.error(chalk.red('No package name has been passed in for API golden approval.'));
   process.exit(1);
 }
 
 const projectDir = path.join(__dirname, '../');
-const packageNameGuess = guessPackageName(packageName, path.join(projectDir, 'src'));
+const packageNameGuess = guessPackageName(searchPackageName, path.join(projectDir, 'src'));
 
 if (!packageNameGuess.result) {
   console.error(chalk.red(`Could not find package for API golden approval called ` +
-    `${chalk.yellow(packageName)}. Looked in packages: \n${packageNameGuess.attempts.join('\n')}`));
+    `${chalk.yellow(searchPackageName)}. Looked in packages:\n` +
+    `${packageNameGuess.attempts.join('\n')}`));
   process.exit(1);
 }
 
+const [packageName, ...entryPointTail] = packageNameGuess.result.split('/');
+const apiGoldenTargetName =
+    `//tools/public_api_guard:${packageName}/${entryPointTail.join('-')}.md_api.accept`;
+
 // ShellJS should exit if any command fails.
 shelljs.set('-e');
 shelljs.cd(projectDir);
-shelljs.exec(`yarn bazel run //tools/public_api_guard:${packageNameGuess.result}.d.ts_api.accept`);
+shelljs.exec(`yarn bazel run ${apiGoldenTargetName}`);

scripts/check-mdc-exports.ts

@@ -75,7 +75,6 @@ function getMissingSymbols(name: string, skipped: string[], skippedPatterns: Reg
 
 /**
  * Gets the name of the exported symbols from a particular package.
- * Based on https://github.com/angular/angular/blob/master/tools/ts-api-guardian/lib/serializer.ts
  */
 function getExports(name: string): string[] {
   const entryPoint = join(__dirname, '../src', name, 'public-api.ts');

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

@@ -9,7 +9,7 @@ import {
   dispatchTouchEvent,
   dispatchEvent,
   createTouchEvent,
-} from '@angular/cdk/testing/private';
+} from '../../testing/private';
 import {fakeAsync, inject, tick} from '@angular/core/testing';
 import {InputModality, InputModalityDetector, TOUCH_BUFFER_MS} from './input-modality-detector';
 

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",