Since documentation and StackOverflow answers are currently sparse for Ionic 4, this tip may hopefully help you save a lot of time debugging if you are transitioning a project from Ionic 3 to Ionic 4.
If you discover one of your components is missing the “hydrated” class, a class programmatically applied to Ionic 4 components at run-time (your component’s DOM element will have visibility: hidden), check your component’s HTML markup!
Likely there is something missing or erroneous in that particular component or any nested component within that doesn’t conform exactly to the schema described in the Ionic 4 documentation.
For example, not specifying a correct property value for the side attribute:
<ion-list>
<ion-item-sliding>
<ion-item>
...
</ion-item>
<ion-item-options side="right"> <!-- should be side="end" -->
<ion-item-option (click)="foo()">
<ion-icon name="quote" slot="top"></ion-icon>
<ion-label slot="bottom">...</ion-label>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
This results in a run-time DOM tree that looks like the following (note that ion-list is not “hydrated”, which bubbles up from the unhydrated ion-item-options due to its bad side attribute value):
<ion-list _ngcontent-c5 class="list list-md">
<ion-item-sliding _ngcontent-c5 class>
<ion-item _ngcontent-c5 class="in-list item hydrated">
...
</ion-item>
<ion-item-options _ngcontent-c5 side="right" ng-reflect-side="right"> <!-- notice how this is not hydrated and bubbles up to ion-list not being hydrated -->
<ion-item-option (click)="foobar()" color="primary" ng-reflect-color="primary">
<ion-icon _ngcontent-c5 name="quote" slot="top" ng-reflect-name="quote" role="img" class="hydrated" aria-label="quote"></ion-icon>
<ion-label _ngcontent-c5 slot="bottom" class="sc-ion-label-md-h sc-ion-label-md-s hydrated">...</ion-label>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
Thanks for this writeup Chris. To clarify, when you’ve experienced this, the hydration failure would happen every time your component was loaded?
I’m experiencing something similar, and haven’t found any leads yet. However, in my case my component loads initially, but then when a bound value is updated, and the component is redrawn, then the hydration failure occurs. But if I then reload the page, even using the updated data, the component is hydrated/visible again. And at no point is any error message shown in the console.
Pretty frustrating, but you’ve provided a helpful avenue to explore. Thanks!
Hi Brad,
I can’t remember specifically whether the failure would happen every time the component was loaded, but my guess would be yes.
Hopefully you’ve found out what the issue is! It might even be worthwhile to post an issue in GitHub to have more explicit errors when a component fails to “hydrate” so devs don’t end up spending hours figuring out the root cause.
Hi Brad,
Your post is from a while back but I wonder if you had found a solution for that problem back then. I’m facing the same situation and don’t know how to get around it. Appreciate any help,
Thanks,
Lars