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

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!

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...

@jdnichollsc

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

@tsonevn

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

@tsonevn

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! 👍

@jdnichollsc

@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
            }
        ]
    }
];

@jogboms

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

Also it works perfect using router-outlet

@jdnichollsc

@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?

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 :)

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

@jdnichollsc

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

@dvdbrk

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

what are you trying to do?

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 ...

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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

jdnichollsc commented on Dec 7, 2017

tsonevn commented on Dec 7, 2017

jdnichollsc commented on Dec 8, 2017

jdnichollsc commented on Dec 14, 2017

jogboms commented on Dec 14, 2017

jdnichollsc commented on Dec 15, 2017

jdnichollsc commented on Dec 15, 2017

jogboms commented on Dec 16, 2017

jdnichollsc commented on Dec 22, 2017

jogboms commented on Dec 22, 2017

dvdbrk commented on Jun 2, 2018

jdnichollsc commented on Jun 2, 2018

TheOnlyMatt commented on Sep 12, 2018

nmongiya commented on Sep 21, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions