Error: Currently in page back navigation - component should be reattached instead of activated

[jdnichollsc]

Hello guys,
I'm using the page-router-outlet component to have beautiful transitions of my child components, but I'm getting the following error after returning in the backward navigation and my app freezes (The tap system doesn't work and the navigation stops working):

This is my routing configuration:

export const CatalogRoutes: Routes = [
  { path: '', component: HomeComponent,
    children: [
      { 
        path: '', 
        component: CategoryListComponent
      },
      { 
        path: 'category-list/:categoryId', 
        component: CategoryListComponent
      },
      { 
        path: 'product-list', 
        component: ProductListComponent 
      }
    ]  
  }
]

And the template of the Home component is:

<page-router-outlet></page-router-outlet>

Versions:

• "nativescript-angular": "4.4.1"
• "angular/router": "4.4.6"

Let me know what you think, thanks in advance!

[jdnichollsc]

About the navigation, I'm navigating to the same component (CategoryListComponent)... when my service doesn't return child categories, I'm navigating to my other component (ProductListComponent) and removing the current route of the history at the same time, example:
category-list.component

ngOnInit() {
    this.activatedRoute.params.subscribe(params => {
        let categoryId = params["categoryId"] || null
        this.myAPI.getCategories(categoryId).subscribe(res => {
            if(res.length){
                this.categoryTitle = params["title"]
                this.categories = res
            }
            else{
                this.route.navigate(
                    ['/catalog/product-list', { 
                        title: this.categoryTitle, 
                        categoryId: categoryId 
                    }], 
                    { replaceUrl: true }
                )
            }
        })
    })
}

On the other hand with the router-outlet component the navigation works well...

[tsonevn]

Hi @jdnichollsc,
Could you provide sample project, which would demonstrate the behavior, which you are facing and also could be used for debugging?

[jdnichollsc]

@tsonevn of course, let me create a sample project, thanks for your help!

[jdnichollsc]

Hi @tsonevn,
Sorry for the delay, you can see my sample project from the NativeScript Playground: https://play.nativescript.org/?template=play-ng&id=r4AICW&v=9

Let me know what you think, thanks for your help! 👍

[jogboms]

@jdnichollsc I reviewed your project and saw that you had two page-route-outlets. One more within home.component.ts.
After looking at the component, i realised it was indeed causing the error. I would advise you employ the use of a componentless route angular provides.

Replace this:

const routes: Routes = [
    {
        path: '', component: HomeComponent,
        children: [
            {
                path: '',
                component: CategoryListComponent
            },
            {
                path: 'category-list',
                component: CategoryListComponent
            },
            {
                path: 'product-list',
                component: ProductListComponent
            }
        ]
    }
];

With this.

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: CategoryListComponent
            },
            {
                path: 'category-list',
                component: CategoryListComponent
            },
            {
                path: 'product-list',
                component: ProductListComponent
            }
        ]
    }
];

[jdnichollsc]

Ohh yes, @jogboms you're right!
But I want to use the HomeComponent as a layout for these other components :)

[jdnichollsc]

Also it works perfect using router-outlet

[jogboms]

@jdnichollsc If you need both routes to share a particular template, why not have HomeComponent be a wrapper component and then use Content Projection (ng-content)?
Or how about using the router-outlet since it fits perfectly?

[jdnichollsc]

Yeah, maybe the ng-content is a temporal solution... But I don't want to use the router-outlet component because I want to have the native transitions using the page-router-outlet :)

[jogboms]

Yeah. The ng-content seems more applicable here at least until using multi frames becomes available for {N} Angular.

[dvdbrk]

@jdnichollsc Did you found a solution at the end? Anyone?

[jdnichollsc]

Hi @dvdbrk, for my case I need to try the following solution #1306 (comment)

what are you trying to do?

[TheOnlyMatt]

Did you find a solution to your issue ?
I am facing the same problem and cannot find how to prevent a component to be reactivated ...

[nmongiya]

I am also trying to find a solution for the same.