bug(CdkTable): render QueryList timing issue in >= 17.1.0

[hrmcdonald]

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

17.0.6

Description

A change that went through in 17.1.0 seems to have changed how the CDK Table component initializes. It seems now certain initialization methods are getting called before content children exist in some cases?

Prior to this update it looks like _cacheRowDefs() was not called until ngAfterContentChecked() which meant all content children queries had values. In 17.1.10 however this call now has a chance to run in _outletAssigned().

_outletAssigned() checks for the existence of:

• this._rowOutlet
• this._headerRowOutlet
• this._footerRowOutlet
• this._noDataRowOutlet

However, when _cacheRowDefs() is called here (as a result of _render() getting called), it uses these ContentChild queries:

• this._contentHeaderRowDefs
• this._contentFooterRowDefs
• this._contentRowDefs

However, these are all undefined still when run with 17.1.0 or higher at the moment (at least when run in our library's storybook). It seems they are maybe getting called too early because of _outletAssigned()? When run in 17.0.6 or any early version this was never the case because these methods only were called after ngAfterContentChecked(). The problem here is those empty values get passed to _getOwnDefs(), which looks like this:

private _getOwnDefs<I extends {_table?: any}>(items: QueryList<I>): I[] {
  return items.filter(item => !item._table || item._table === this);
}

Because this method assumes items exist, but they are actually undefined in this instance an error gets thrown and no tables can load.

I assume because _render() looks like it still gets called in ngAfterContentChecked() everything would be fine as long as _getOwnDefs() and possibly other internal methods were updated to handle null/undefined scenarios.

Reproduction

I am unsure how to recreate this at the moment. I assume it only occurs on a more old-school non-standalone component example perhaps? I wanted to open this ticket as this will prevent us from allowing anyone to update to 17.1.0 or higher until we can get something figured out here.

Our extension of the CDK table is purely for styling much like the MatTable and its directives. We do not alter any of this logic or override any lower CDK functions.

I will work on recreating this in a stackblitz and update this ticket when/if I can.

Expected Behavior

Tables load like normal.

Actual Behavior

TypeError: Cannot read properties of undefined (reading 'filter')
    at MtrTable._getOwnDefs (vendors-node_modules_pnpm_angular_cdk_17_1_2__angular_common_17_1_2__angular_core_17_1_2_rxjs-b8ea33.iframe.bundle.js:2405:18)
    at MtrTable._cacheRowDefs (vendors-node_modules_pnpm_angular_cdk_17_1_2__angular_common_17_1_2__angular_core_17_1_2_rxjs-b8ea33.iframe.bundle.js:2142:49)
    at MtrTable._render (vendors-node_modules_pnpm_angular_cdk_17_1_2__angular_common_17_1_2__angular_core_17_1_2_rxjs-b8ea33.iframe.bundle.js:2042:10)
    at MtrTable._outletAssigned (vendors-node_modules_pnpm_angular_cdk_17_1_2__angular_common_17_1_2__angular_core_17_1_2_rxjs-b8ea33.iframe.bundle.js:2036:12)
    at new FooterRowOutlet (vendors-node_modules_pnpm_angular_cdk_17_1_2__angular_common_17_1_2__angular_core_17_1_2_rxjs-b8ea33.iframe.bundle.js:1497:11)
    at NodeInjectorFactory.FooterRowOutlet_Factory [as factory] (vendors-node_modules_pnpm_angular_cdk_17_1_2__angular_common_17_1_2__angular_core_17_1_2_rxjs-b8ea33.iframe.bundle.js:1500:12)
    at getNodeInjectable (vendors-node_modules_pnpm_storybook_addon-essentials_7_6_9__types_react-dom_18_0_6__types_rea-3e3f13.iframe.bundle.js:56043:38)
    at instantiateAllDirectives (vendors-node_modules_pnpm_storybook_addon-essentials_7_6_9__types_react-dom_18_0_6__types_rea-3e3f13.iframe.bundle.js:64249:23)
    at createDirectivesInstances (vendors-node_modules_pnpm_storybook_addon-essentials_7_6_9__types_react-dom_18_0_6__types_rea-3e3f13.iframe.bundle.js:63671:3)
    at ɵɵelementContainerStart (vendors-node_modules_pnpm_storybook_addon-essentials_7_6_9__types_react-dom_18_0_6__types_rea-3e3f13.iframe.bundle.js:73435:5)

Environment

• Angular: >= 17.1.0
• CDK/Material: >= 17.1.0
• Browser(s): Chromium, Webkit, and Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): MacOS

[crisbeto]

This will be hard to diagnose without a reproduction. Before landing this change we ran it against all of the internal apps using the Material and they all worked as expected.

[hrmcdonald]

Yeah, I'll try and get a stackblitz online soon and report back.

[hrmcdonald]

@crisbeto I've produced a recreation using a super stripped-down version of the table module from our library that extends the CDK here: https://github.com/hrmcdonald/cdk-table-issue-recreation

[crisbeto]

Thank you for the repro. My best guess is that Storybook is doing something weird which messes up the timing. I've sent out #28551 to account for it.

[daddykom]

We got the same error. In storybook and in the angular application.

Many thanks to the researches of @hrmcdonald , downgrade to 17.0.6 helped.