ionic-framework: 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
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 9
- Comments: 52 (23 by maintainers)
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!
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).
Did a fix for this happen to make it into Ionic 5? This is really important for keeping Firebase read queries to an acceptable level when working with large datasets and attaching snapshot listeners.
+1 on the need. It’s a quite needed feature for complex applications and it’s blocking us from completely migrating to Ionic 4.
Is there any progress so far
This is kind of a big deal… still no solution? I’m running ionic 5.2.3 and still having the issue.
Any news on this? I too want to use a custom route reuse strategy but stuck due to this issue.
A portion of my app has a chat feature. Currently, when a user clicks on conversation they route to a conversation-detail page, with a list of message cells. Every time they do this, the component redraws all of the message cells, which is not optimally performant because it renders the cells each time. Big messaging apps like iMessage, Slack, etc do not do this as they cache the rendered cells.
From what I gather, Angular solves this issue with the RouteReuseStrategy. Is this possible to apply the same routing strategy in Ionic? I’ve tried many examples and can’t get it to work.
Any guidance / suggestions would be super helpful! 😄
I’m also considering to extend IonicRouteStrategy to enable avoiding to destroy one of the components in my app. In my case, the app has a list component, from which the user can drill into the detail view. The problem is that the detail view contains a map which is built using google maps and map destroy is not supported (https://issuetracker.google.com/issues/35821412#comment32). Map instances in a single page application should be reused and not destroyed then recreated so custom route strategy can be very handy here…
Please provide a demo of what you are currently using so we can better understand.
Dear contributors and developers, please, reply. Any way to use “reuse strategy” feature in future?
Until then, if you really need to use your own custom route reuse strategy, you can just opt out of using the
ion-router-outletcomponent and just use the vanilla angularrouter-outletcomponent instead.