bug(angular): cannot read classList of element rendered in *ngIf rendered ion-content

[indraraj26]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x
• [ ] Nightly

Current Behavior

It will throw an error if you apply ngIf on ion-content and place the swiper inside the ion-content.

Expected Behavior

Looks like ion-content is not able to place the swiper on time.

Steps to Reproduce

Step1: clone below repo Step2: switch to swiper-error branch Step3: ionic serve and see the console

Code Reproduction URL

https://github.com/indraraj26/storage-boolean-issue/tree/swiper-error

Ionic Info

Ionic:

Ionic CLI : 6.19.0 (C:\Users\user\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/angular 6.1.3 @angular-devkit/build-angular : 13.2.6 @angular-devkit/schematics : 13.2.6 @angular/cli : 13.2.6 @ionic/angular-toolkit : 6.1.0

Capacitor:

Capacitor CLI : 3.5.0 @capacitor/android : 3.6.0 @capacitor/core : 3.6.0 @capacitor/ios : not installed

Utility:

cordova-res : 0.15.4 native-run : 1.5.0

System:

NodeJS : v14.17.1 (C:\Program Files\nodejs\node.exe) npm : 6.14.13 OS : Windows 10

Additional Information

No response

[sean-perkins]

@indraraj26 thanks for reporting this issue. I am able to reproduce, but am unsure where exactly the problem is at the moment. When reproducing with a vanilla web component using shadow DOM + a slot, the issue does not occur.

This could be a problem with Stencil and the hydrated bundle. I will need to create a new project with Stencil and a simple component to confirm.

I'm assigning myself so that this does not get lost in the queue.

[sean-perkins]

Ok I have been able to diagnose that it isn't an issue with a new Stencil project. We will classify this as a bug and create a spike to investigate what ion-content is doing that is impacting this behavior.

[fweth]

Are you sure this is only a bug in Ionic? I use Swiper in vanilla JS and also get Cannot read properties of undefined (reading 'classList') when having both, slidesPerView: "auto" and loop: true. If I disable one of the two options, no error is thrown. Also the error doesn't seem to impact the functionality of the swiper. I can't reproduce it (currently) in CodeSandbox, but still weird, what could be the cause (if no bug)?

[amandaejohnston]

Thanks again for the issue! I have found that the error no longer triggers after upgrading to Swiper 9. Namely, I migrated the test app to Swiper Element, since Swiper's Angular component was removed v9.

I've created a fork and comparison branch to show the migration: https://github.com/amandaejohnston/storage-boolean-issue/compare/swiper-error...amandaejohnston:storage-boolean-issue:swiper-error-element

We also have a migration guide here: https://ionicframework.com/docs/angular/slides This was written for migrating from ion-slides, but many of the examples still hold when going from Swiper's framework components to Swiper Element.

Because this issue is resolved with the latest version of Swiper, I'm going to go ahead and close it out, but please let me know if you have any questions.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.