build: update to rules_nodejs v4.0.0-beta.0 and use new API golden tool

.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.08d791f37.0",
     "@material/auto-init": "12.0.0-canary.08d791f37.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

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