Custom route reuse strategy not supported

Bug Report

Ionic version: [x] 4.0.2

Current behavior: As described in #15688. When implementing a custom RouteReuseStrategy that tries to store and reuse specific routes, IonRouterOutlet bails out with the error:

incompatible reuse strategy

(see IonRouterOutlet::detach())

Expected behavior: I expect route reuse strategy that try to attach/detach routes to work as designed for Angular.

Steps to reproduce: Add the code below to a barebone Ionic application and navigate to any page.

Related code:

test-route-reuse-strategy.ts:

export class TestRouteReuseStrategy implements RouteReuseStrategy {

    private handle: DetachedRouteHandle = null;

    shouldReuseRoute(future: ActivatedRouteSnapshot, current: ActivatedRouteSnapshot): boolean {
        return true;
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return this.decide(route) && null !== this.handle;
    }

    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        return this.decide(route);
    }

    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void {
        this.handle = handle;
    }

    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
        return this.handle;
    }

    private decide(route: ActivatedRouteSnapshot): boolean {
        // Simplified
        return true;
    }

}

app.module.ts:

    providers: [
        // ...
        { provide: RouteReuseStrategy, useClass: TestRouteReuseStrategy }
    ],

Other information: Previously reported in #15688 and closed, but this seems to prevail in master.

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.10.2 (/home/snip/.config/yarn/global/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.2
   @angular-devkit/build-angular : 0.12.4
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.2.4
   @ionic/angular-toolkit        : 1.3.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 5 other plugins)

System:

   Android SDK Tools : 26.1.1 (/home/snip/Android/Sdk)
   NodeJS            : v8.9.4 (/home/snip/.nvm/versions/node/v8.9.4/bin/node)
   npm               : 6.8.0
   OS                : Linux 4.15

[liamdebeasi]

Hi there,

This is definitely something that is on our radar. We’ve had to prioritize a few other things, but we hope to loop back to this soon. Didn’t want you to think we were just ignoring you 🙂

Thanks!

[AlecMRogers]

I don’t understand why the control of component caching is so difficult, since it severely impacts the performance of an application. I figured I would weigh in on this issue as another voice, if not an entirely different use case.

I am fairly new to ionic, but I’ve been working with javascript and Cordova for a long time. The inability to use the same component instance every time a page is loaded using the router is deeply frustrating: performance is negatively affected if I have to create a complex UI every time the page is loaded (as happens when displaying maps with overlays, etc, as mentioned above).

I don’t really need a stack of components at all; using ion-router would be fine, but it seems that much of ionic navigation and UI (ion-slide-nav, ion-tabs, etc) will have to be abandoned if I do so.

– Update (after looking at the source code a bit) –

Can I create a subclass of ion-router-outlet that uses a custom ComponentFactory to return a static component instance? That has the benefit of being compatible with other UI elements and also (AFAIK) not interfering with the navigation stack (and I am navigating from root in most cases anyway).