bug: ion-slides swiper instance does not get re-initialized with angular ivy

Bug Report

Ionic version:

[x] 5.0.0-rc.2

Current behavior: With angular ivy enabled (9.0.0-rc.12) ion-slides (specifically the swiper instance) does not get re-initialized after destroyed once and is therefore unusable afterwards.

Expected behavior: Swiper instance gets re-initialized, ion-slides keep working.

Steps to reproduce:

• clone sample app
• npm i
• ionic serve
• open console
• click on “Go to slides page”
• click “Go to next slide” (working!)
• click back button
• click on “Go to slides page” again
• “Go to next slide”, “Go to previous slide” is broken
• check console, unfold logged Swiper object -> destroyed: true

Related code:

A sample application via GitHub

Other information: Removing the following line fixes the problem, but I don’t think that its a solution to the problem.

https://github.com/ionic-team/ionic/blob/ae4e28969f1d7b3e41f16f4f70c6befdaca6118f/core/src/components/slides/slides.tsx#L153

Related: ngx-swiper-wrapper#226 As ionic is shipping the swiper directly embedded into the framework maybe it needs to be compiled with ngcc once.

Ionic info:

Ionic:

   Ionic CLI                     : 5.4.15 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 5.0.0-rc.2
   @angular-devkit/build-angular : 0.900.0-rc.12
   @angular-devkit/schematics    : 9.0.0-rc.12
   @angular/cli                  : 9.0.0-rc.12
   @ionic/angular-toolkit        : 2.1.2

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 4 other plugins)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   ios-deploy : 1.9.2
   ios-sim    : 8.0.2
   NodeJS     : v12.4.0 (/usr/local/bin/node)
   npm        : 6.11.3
   OS         : macOS Catalina
   Xcode      : Xcode 11.3.1 Build version 11C504

[DavidWiesner]

Here is a workaround for this issue. Simply postpone the slider initialization with ngIf and the angular lifecycle.

my-component.html

<ion-slides *ngIf="didInit">
   <!-- multiple <ion-slide/> -->
</ion-slides>

my-component.ts

@Component({
    templateUrl: 'my-component.html'
})
export class MyComponent implements AfterViewInit {
    public didInit: boolean = false;

    ngAfterViewInit() {
        this.didInit = true;
    }
}

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic/pull/20899 and will be available in an upcoming release of Ionic Framework.