bug(cdk): @angular/cdk requires rxjs without listing it in (peer)dependencies

[bgotink]

Reproduction

Use a package manager that handles peer dependencies strictly (yarn 2 with PnP) and try to use @angular/cdk/testing.

Minimal repro:

cd $(mktemp -d)
yarn init -2
echo '{"workspaces": ["project"]}' > package.json
mkdir project && cd project
echo '{}' > package.json
yarn add @angular/cdk@11 @angular/core@11 @angular/common@11 rxjs@6 zone.js@~0.10.3
yarn node -p 'require("@angular/cdk/testing")'

Expected Behavior

An object gets printed

{
  TestKey: {
    '0': 'BACKSPACE',
    '1': 'TAB',
    '2': 'ENTER',
    '3': 'SHIFT',
    '4': 'CONTROL',
    ...
    F12: 28,
    META: 29
  },
  ComponentHarness: [Function: ComponentHarness],
  ContentContainerComponentHarness: [Function: ContentContainerComponentHarness],
  HarnessEnvironment: [Function: HarnessEnvironment],
  HarnessPredicate: [Function: HarnessPredicate] { stringMatches: [Function (anonymous)] },
  _getTextWithExcludedElements: [Function: _getTextWithExcludedElements],
  handleAutoChangeDetectionStatus: [Function: handleAutoChangeDetectionStatus],
  manualChangeDetection: [Function: manualChangeDetection],
  parallel: [Function: parallel],
  stopHandlingAutoChangeDetectionStatus: [Function: stopHandlingAutoChangeDetectionStatus]
}

Actual Behavior

An error gets printed

Error: @angular/cdk tried to access rxjs, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: rxjs (via "rxjs")
Required by: @angular/cdk@virtual:b6421f60d5554bb3fd6c8ab41f847d22374d9ebd9675b37d59cf9a20427e0d31b12efcd29150d01808b17913cfab4fcf4fb64ff3a4c15d1463221b4db2072828#npm:11.2.8 (via /private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.yarn/$$virtual/@angular-cdk-virtual-fd272f1981/0/cache/@angular-cdk-npm-11.2.8-0c9b5ec3cf-6c6c99e2d4.zip/node_modules/@angular/cdk/bundles/)

Require stack:
- /private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.yarn/$$virtual/@angular-cdk-virtual-fd272f1981/0/cache/@angular-cdk-npm-11.2.8-0c9b5ec3cf-6c6c99e2d4.zip/node_modules/@angular/cdk/bundles/cdk-testing.umd.js
- /private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/project/[eval]
    at internalTools_makeError (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.pnp.js:4935:34)
    at resolveToUnqualified (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.pnp.js:5900:23)
    at resolveRequest (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.pnp.js:5992:29)
    at Object.resolveRequest (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.pnp.js:6070:26)
    at Function.external_module_.Module._resolveFilename (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.pnp.js:5168:34)
    at Function.external_module_.Module._load (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.pnp.js:5033:48)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at /private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.yarn/$$virtual/@angular-cdk-virtual-fd272f1981/0/cache/@angular-cdk-npm-11.2.8-0c9b5ec3cf-6c6c99e2d4.zip/node_modules/@angular/cdk/bundles/cdk-testing.umd.js:2:85
    at Object.<anonymous> (/private/var/folders/_d/ch2kc4h960d10cy_2c41qqzw0000gn/T/tmp.uy2FUYlfVk/.yarn/$$virtual/@angular-cdk-virtual-fd272f1981/0/cache/@angular-cdk-npm-11.2.8-0c9b5ec3cf-6c6c99e2d4.zip/node_modules/@angular/cdk/bundles/cdk-testing.umd.js:5:2)

Environment

• Angular: 11
• CDK/Material: 11
• Browser(s): n/a
• Operating System (e.g. Windows, macOS, Ubuntu): n/a

[Splaktar]

We do have the dependency in Bazel, it should probably also be there in the package.json (for CDK, Material, Google Maps, YouTube Player):

components/src/cdk/scrolling/BUILD.bazel

Lines 19 to 29 in 43081d9

	module_name = "@angular/cdk/scrolling",
	deps = [
	"//src:dev_mode_types",
	"//src/cdk/bidi",
	"//src/cdk/coercion",
	"//src/cdk/collections",
	"//src/cdk/platform",
	"@npm//@angular/common",
	"@npm//@angular/core",
	"@npm//rxjs",
	],

[Splaktar]

We could probably just add RxJS here so that we only have to define the version once across packages:

components/packages.bzl

Lines 4 to 6 in fef9bf5

	ANGULAR_PACKAGE_VERSION = "^12.0.0-0 || ^13.0.0-0"
	MDC_PACKAGE_VERSION = "^9.0.0-canary.419e03572.0"
	TSLIB_PACKAGE_VERSION = "^2.1.0"

[crisbeto]

Fixed by #22471.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}