Angular2 Routing: persisting route tabs and child routes

[Namek]

(I posted the problem on SO: http://stackoverflow.com/questions/34925782/angular2-routing-persisting-route-tabs-and-child-routes but decided to ask here, too, hopefully more specific this time)

So, basically Router in Angular 2 destroys inactive components (my tabs!). The problem is I don't want this behaviour. Reason is I have some components like charts and data grid and want to switch between them fast, I don't want to recreate them.

I've found some workaround for one-level routing but it's totally not a solution.

app.ts:

    @Component({ /*...*/ })
    @RouteConfig([
        {path: '/**', redirectTo: ['Dashboard']},

        {path: '/dashboard', name: 'Dashboard', component: EmptyRoute},
        {path: '/products/...', name: 'Products', component: EmptyRoute},
        {path: '/sales', name: 'Sales', component: EmptyRoute},
        {path: '/reports', name: 'Reports', component: EmptyRoute},
    ])
    export class App {
        constructor(private router: Router) {
        }

        public isRouteActive(route) {
            return this.router.isRouteActive(this.router.generate(route))
        }
    }

As you can see component is set to EmptyRoute (just an empty view @Component with no methods and no data) and I don't use <router-outlet> but instead I instantiate my route components manually:

app.html:

    <dashboard [hidden]="!isRouteActive(['/Dashboard'])"></dashboard>
    <products-management [hidden]="!isRouteActive(['/Products'])"></products-management>
    <sales [hidden]="!isRouteActive(['/Sales'])"></sales>
    <reports [hidden]="!isRouteActive(['/Reports'])"></reports>

but of course it doesn't work for child routes. In my (existing - written with Angular 1.x) application I have /products/product/21/pricing or /products/product/21 etc. (could get rid of products/ part in the middle but whatever).

So, going back to Router. It instantiates and destroys. Ideally, I'd like to:

1. instantiate components only once - or better - decide when I want to do this (some Strategy?)
2. decide whether to destroy or hide components. When I hide a component I want to reuse it when route switches to the component.

EDIT on 14.11.2017: some people ask me about solution - yeah, I ditched Angular and use Elm for private projects and changed my job.

[waeljammal]

I solved this problem using a custom outlet, please be aware that even though my outlet works it's not finished! I'm adding support for animation, ability to do something like data: {persist: false/true} in the routes and the ability to actually dispose the component if CanReuse returns false.

Just add it to the directives and use persistent-router-outlet instead of router-outlet. If you use it on a child route then only the children of that route would persist and if you navigate away from the root then everything gets destroyed, so if you use it everywhere then your entire route structure should persist but I have not tested that part yet, I am only using it on child routes so navigating between tab's etc. persist.

https://gist.github.com/waeljammal/467286d64f59f8340a93

[Namek]

Wow, thanks! In the meantime I've found there's already an issue for this: #5275 - it seems I duplicate issues. Found it there: http://stackoverflow.com/questions/33648355/angular-2-swapping-between-different-components-without-destroying-them

I'll try your solution and repost how it works with my case.

[Namek]

First of all, it indeed works for me. But:

1. TypeScript compiler throws errors at me because of those overwritten private fields like _elementRef.
   2 I would suggest not including jQuery into that
   $(el).show() could be replaced by el.hidden = false and $(el).hide() by el.hidden = true

[waeljammal]

Oh feel free to change it, I used jquery because we use a bunch of libs that require it so just ended up using it as it's there already. Force of habit from NG1 lol..

It's strange I don't get the errors, but you are right should not be overriding those properties, I'll probably update the gist shortly.

[Namek]

It's strange I don't get the errors, but you are right should not be overriding those properties, I'll probably update the gist shortly.

Aah, tslint.

[waeljammal]

I updated that gist anyway, I'll probably update it again once I finish working on the outlet.

[jv-k]

Any updates to this? I have a similar problem with Router killing my components.

[waeljammal]

I'm still working on my outlet at work but I will respond here when I'm done with it, the gist I posed was my prototyping it to see if it would work for the project I'm working on, now I'm actually doing it properly but will take some time..

[Namek]

See my little fork of that gist (or my comment on the bottom) https://gist.github.com/waeljammal/467286d64f59f8340a93. I made a small change to it for my case: I have Product component which is instantiated multiple times but shouldn't be reused.

[Namek]

@waeljammal any news on this? Currently I have problem to distinct child components. It seems that simply identifying by componentInstruction.params is not enough since I need all params (including parent and parent's parents and so on). Or maybe URL. Couldn't find a way to get those, ideas?

[Namek]

OK, I managed to distinct instruction path this hacky way:

private determineCurrentInstructionPath(): string {
    let key = '[]';
    let router = this.parentRouter;
    while (router !== null) {
        if (key.length > 0) {
            key = '-->' + key;
        }

        let instr = (<any>(<any>router)._currentInstruction);
        if (instr) {
            key = Json.stringify(instr.urlPath) + key;
        }

        router = router.parent;
    }

    return key;
}

[Namek]

Anyway, it doesn't work for me. I'm not sure why but seems that wrong outlet gets notified about the route. Here's my plnkr example: http://plnkr.co/edit/MMy3azc4ksQOH6ezZIG5?p=preview
Scenario to test:

1. Click Product 1
2. Click Product 2
3. Click Product 1 again
   Expected to see: "product info here" text on the bottom.
   Result: that text is not visible

Clicking on "Show Info" or "Go Buy" won't work on Product 1 tab. But when you'll look into inspector you'll see that clicking "Show Info" or "Go Buy" will make some work on instances of Product 2 tab. To visualize the bug you can comment out line 171 in persistent-router-outlet.ts:
ref.location.nativeElement.hidden = true; and repeat test scenario.

[jpleclerc]

Anything new on this issue?