Components: bug(accordion) "TypeError: Cannot read property 'pipe' of undefined"

Created on 14 Sep 2018  路  6Comments  路  Source: angular/components

Bug, feature request, or proposal:

Bug

What is the expected behavior?

That accordion works normally

What is the current behavior?

In some cases a TypeError: Cannot read property 'pipe' of undefined is fired, breaking everything.

What are the steps to reproduce?

I tried to reproduce the behaviour but could not reproduce on StackBlitz.
If I remove the accordion wrapper, there are no problems with underlying expansion panels.
The error is fired here

https://github.com/angular/material2/blob/32a001051f15d5073475c7c3bc17a0a46dabf4cd/src/lib/expansion/expansion-panel-header.ts#L73-L74

apparently because _stateChanges results undefined.
At first I thought it was some problem of my code, but the bug presented itself in two different and unrelated occasions.

In both occasions I'm adding dynamically the component which is using the accordion: in one case I'm loading the component using ComponentFactoryResolver, in the second one I'm loading the component with the Router and putting it in a router-outlet.

This is my StackBlitz trial until now (as I said, it works fine, because I cannot pinpoint the real issue): https://stackblitz.com/edit/angular-material2-issue-netdsn

What is the use-case or motivation for changing an existing behavior?

It's broken.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.1.2
Material 6.4.7
TS 2.9.x

Is there anything else we should know?

Everything worked fine with Material 6.4.5, it broke when I upgraded to 6.4.7.

If anyone has suggestion in where I should look for further debugging, I'll be glad to try.

Most helpful comment

@IlCallo Thanks for your issue. For some reason I couldn't think of any scenario where _stateChanges is undefined because we have a safety check for panel.accordion and the accordion initializes always with the _stateChanges property member.

Could it be the case that the CDK and Material version mismatch on your local project? This would explain why the _stateChanges property member is undefined.

All 6 comments

@IlCallo Thanks for your issue. For some reason I couldn't think of any scenario where _stateChanges is undefined because we have a safety check for panel.accordion and the accordion initializes always with the _stateChanges property member.

Could it be the case that the CDK and Material version mismatch on your local project? This would explain why the _stateChanges property member is undefined.

You guessed right (are you a magician?): it was a mismatch version problem.
My package.json got messed up for some reason and with last update it updated all packages except for the CDK one, thank you!

@IlCallo 馃槃 Glad it works now. Thanks for your active issue contribution.

Sadly, I have both CDK and Material at version 6.4.7 and _stateChanges is undefined exactly at the same spot.

I have now further updated my codebase to TypeScript 3.0.1, Angular 7.0.0-rc.0 and CDK/Material 7.0.0-beta.2 and it all magically works.

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._

Was this page helpful?
0 / 5 - 0 ratings

Related issues

LoganDupont picture LoganDupont  路  3Comments

vitaly-t picture vitaly-t  路  3Comments

MurhafSousli picture MurhafSousli  路  3Comments

dzrust picture dzrust  路  3Comments

3mp3ri0r picture 3mp3ri0r  路  3Comments