bug(cdk): [ERROR] TS-993004: Unable to import directive in 19.2.4

[jeremyhofer]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

19.2.3

Description

Upgrading to 19.2.4 from 19.2.3 introduces compilation errors. On my local project the compilation issue is related to CdkFixedSizeVirtualScroll used by CDK overlay, but testing on stack blitz it appears to be an issue with many different directives.

Error message from my local project:

✘ [ERROR] TS-993004: Unable to import directive CdkFixedSizeVirtualScroll.
  The symbol is not exported from ./node_modules/@angular/cdk/overlay/index.d.ts
(module '@angular/cdk/overlay'). [plugin angular-compiler]

In a fresh stack blitz recreation w/ CDK 19.2.4 I am seeing the following:

✘ [ERROR] TS-993004: Unable to import directive CdkScrollable.
  The symbol is not exported from /home/projects/components-issue-starter-mzddipx4/node_modules/@angular/cdk/drag-drop/index.d.ts (module '@angular/cdk/drag-drop'). [plugin angular-compiler]

I suspect the issue was introduced via this commit/PR:

• 6b8e6fc#diff-760144f1e1623bcd5add28c9403080f693452fcc7764be2ca01314c4d5f83dbb
• refactor: use relative imports within npm packages #30647

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-starter-mzddipx4?file=package.json
Steps to reproduce:

1. Simply open the example. The default project w/ latest 19.2.x dependencies fails to compile

Expected Behavior

No regressions should be present in a bugfix release.

Actual Behavior

A regression preventing application compilation has been introduced.

Environment

Angular CLI: 19.2.4
Node: 22.14.0
Package Manager: npm 10.9.2
OS: linux x64

Angular: 19.2.3
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router

Package Version

@angular-devkit/architect 0.1902.4
@angular-devkit/build-angular 19.2.4
@angular-devkit/core 19.2.4
@angular-devkit/schematics 19.2.4
@angular/cdk 19.2.4
@angular/cli 19.2.4
@angular/material 19.2.4
@angular/ssr 19.2.4
@angular/youtube-player 19.2.4
@schematics/angular 19.2.4
rxjs 7.8.2
typescript 5.8.2

[devversion]

Thanks for the issue. Are you by any chance actually relying on some of the scrolling symbols being re-exported from the OverlayModule?

I feel like the Stackblitz start is not representative because it does seem to differ from an Angular CLI app. See:

• No errors: https://stackblitz.com/edit/stackblitz-starters-yecekgxn?file=src%2Fmain.ts
• Errors (same code, but not using Angular CLI): https://stackblitz.com/edit/components-issue-starter-w6prvrxs?file=src%2Fmain.ts

In the real ng CLI app, I think it only surfaces if you use some of the re-exported directives, right?

[frunjik]

Just extra info - I am using Overlay in app
ng build - works
ng serve - fails

[devversion]

@frunjik Thank you! We found out that it's HMR triggering this (but it's still an issue from Angular CDK/Material; HMR works as expected)

[MatteoBarbieriSacmi]

I'm having the same problem just by upgrading Angular from 19.2.3 to 19.2.4
X [ERROR] TS-993004: Unable to import directive CdkPortal.
The symbol is not exported from D://node_modules/@angular/cdk/dialog/index.d.ts (module '@angular/cdk/dialog'). [plugin angular-compiler]

[jeremyhofer]

Double checked / confirmed - only an issue with HMR in the dev-server.

In my use case I am only using directives supplied directly from the OverlayModule, no direct references to scrolling symbols.

My template leveraging overlay:

<button
  mat-button
  class="dropbtn"
  (mouseenter)="buttonMouseEnter()"
  (mouseleave)="buttonMouseLeave()"
  cdkOverlayOrigin
  #trigger="cdkOverlayOrigin"
>
  {{ link().name }}
</button>
<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen()"
  (detach)="detach()"
>
  <div
    class="dropdown-content"
    (mouseenter)="dropdownMouseEnter()"
    (mouseleave)="dropdownMouseLeave()"
  >
    @for (sublink of link().sublinks; track $index) {
      <a
        mat-menu-item
        [routerLink]="sublink.url"
        routerLinkActive="active"
        (click)="linkClick()"
        >{{ sublink.name }}</a
      >
    }
  </div>
</ng-template>

Only reference to cdk in my component class is the OverlayModule import in the component.