bug(CDK_TABLE): "NullInjectorError: No provider for InjectionToken CDK_TABLE!" after upgrade of cdk to 17.1.0

[kklocker]

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

@angular/cdk: 17.0.4

Description

Hi, we have a pretty large codebase with a custom table class TableComponent that extends CdkTable.
I am now trying to bump our angular stack but this fails at runtime.
These are some of the package changes.

I have a sneaking suspicion that this "bug" was introduced with #28356
Looking for help as to how to resolve this

Reproduction

I don't really know if this is a bug or if our implementation has been wrong, but this worked in the last version

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-hj5acn?file=package.json
Steps to reproduce:

1. Change the @angular/cdk package (and dependencies) to point to 17.1.0
2. See the NullInjectorError: No provider for InjectionToken CDK_TABLE! error message in the console
   NB: this is not an optimal repro, since on 17.0.4, there is another error which I have not encountered in our app

Expected Behavior

The tables are showing as they did in the latest version

Actual Behavior

When starting the application, I get the error
NullInjectorError: No provider for InjectionToken CDK_TABLE!

I have tried adding the {provider:CDK_TABLE, useClass: CdkTable} to our TableComponent, and then it fails with

ERROR TypeError: Cannot read properties of undefined (reading 'filter')
    at CdkTable._getOwnDefs (table.mjs:2004:22)
    at CdkTable._cacheRowDefs (table.mjs:1733:53)
    at CdkTable._render (table.mjs:1630:14)
    at CdkTable._outletAssigned (table.mjs:1624:18)
    at new FooterRowOutlet (table.mjs:1090:15)
    at NodeInjectorFactory._class21_Factory [as factory] (table.mjs:1092:23)
    at getNodeInjectable (core.mjs:4455:44)
    at instantiateAllDirectives (core.mjs:12950:27)
    at createDirectivesInstances (core.mjs:12349:5)
    at ɵɵelementContainerStart (core.mjs:22667:9)
    at ɵɵelementContainer (core.mjs:22713:5)
    at TableComponent_Template (template.html:17:1)
    at executeTemplate (core.mjs:12314:9)
    at renderView (core.mjs:15332:13)
    at renderComponent (core.mjs:15279:5)

Environment

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

Angular CLI: 17.0.8
Node: 18.13.0
Package Manager: yarn 3.4.1
OS: win32 x64

Angular: 17.1.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.1701.4
@angular-devkit/build-angular 17.1.4
@angular-devkit/core 17.1.4
@angular-devkit/schematics 17.1.4
@angular/cdk 17.1.2
@angular/cli 17.0.8
@angular/material 17.1.2
@angular/material-moment-adapter 17.1.2
@schematics/angular 17.1.4
rxjs 7.8.1
typescript 5.3.3
webpack 5.88.2
zone.js 0.14.4

[kklocker]

Resolved: Adding

   { provide: CdkTable, useExisting: TableComponent },
   { provide: CDK_TABLE, useExisting: TableComponent }

to the table class and
changing the template from

<ng-container headerRowOutlet></ng-container>
<ng-container rowOutlet></ng-container>
<ng-container noDataRowOutlet></ng-container>
<ng-container footerRowOutlet></ng-container>

to

@if (_isNativeHtmlTable) {
    <thead role="rowgroup">
        <ng-container headerRowOutlet />
    </thead>
    <tbody class="mdc-data-table__content" role="rowgroup">
        <ng-container rowOutlet />
        <ng-container noDataRowOutlet />
    </tbody>
    <tfoot role="rowgroup">
        <ng-container footerRowOutlet />
    </tfoot>
} @else {
    <ng-container headerRowOutlet />
    <ng-container rowOutlet />
    <ng-container noDataRowOutlet />
    <ng-container footerRowOutlet />
}

(as in https://github.com/angular/components/pull/28356/files#diff-733f025b43bf55079eece07dbe0b529e68a63ece8c3cdc1e14683db80d0a616e) works

[kklocker]

This is very weird:

@if (!_isNativeHtmlTable) {
    <ng-container headerRowOutlet />
    <ng-container rowOutlet />
    <ng-container noDataRowOutlet />
    <ng-container footerRowOutlet />
}

renders the table without issues,

<ng-container headerRowOutlet />
<ng-container rowOutlet />
<ng-container noDataRowOutlet />
<ng-container footerRowOutlet />

does not... Is there perhaps something magical timings going on with the _isNativeHtmlTable property?

[crisbeto]

The error should be fixed by #28551 in the 17.2.0 release.

[kklocker]

Ahh great! :D Thanks @crisbeto

[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.}