CODEWITHSUNDEEP
angulartypescriptangular2-routing
cyberbeast
cyberbeast

Reputation: 688

angular2 router behavior - url changes and then reverts back to what it was before

I am encountering some unexpected behavior in my angular2 code. I am using an angular router outlet to switch between views in a parent container. I have defined the routes in the following manner:-

export const routes: Routes = [
{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},
{
  path: 'dashboard',
  component: DashboardComponent
},
{
  path: 'suppliers',
  component: SuppliersComponent
},
{
  path: 'suppliers/:supplier_id',
  component: SuppliersComponent
},
{
  path: 'subjects',
  component: SubjectsComponent,
  children: [
  {
    path: 'information',
    component: SubjectsInfoComponent
  },
  {
    path: 'measurements',
    component: SubjectsMeasurementsComponent
  },
  {
    path: 'activity_log',
    component: SubjectsActivityComponent
  },
  {
    path: 'components',
    component: SubjectsComponentsComponent
  }
]
},
{
  path: 'subjects/:subject_id',
  component: SubjectsComponent
}
];

I also have two buttons on my navbar to switch views to either the '/suppliers' path or '/subjects' path. The respective component views have implementations for switching on the '/subjects/:subject_id' and '/suppliers/:supplier_id' from within the component structure.

From the point of view of functionality, everything works the way it should. Clicking on the buttons to switch the view works just fine. However, something that I have observed is that in one particular case where I try to switch from the 'suppliers' route to the 'subjects/:subject_id' route, the url changes very briefly to the correct route and changes the view accordingly, BUT after a brief moment it switches back to the 'suppliers' route and leaves the correct view in the router-outlet (which means the component for the 'subjects/:subject_id' fires up and behaves normally, but the url switches back to the 'suppliers' path).

I am trying to understand the underlying cause behind this. Nothing in my implementation is firing up a route change back to supplier automatically, and even if that was the case the whole view should change and not just the URL.

Anyone have any ideas/explanations as to where I can eliminate this url-reverting behavior?

UPDATE: gif

gif animation to show the behavior

This is the sequence of actions:

  1. root route - localhost:4200/ -> localhost:4200/dashboard

  2. switch to suppliers route - localhost:4200/suppliers

  3. switch to subjects route with id - url changes to localhost:4200/subjects/5951530e9927b0521b17e294 briefly and then automatically reverts back to localhost:4200/suppliers.

Upvotes: 1

Views: 1362

Answers (1)

DeborahK
DeborahK

Reputation: 60518

You could try turning on enableTracing to see if that provides more clues as to what the routing is doing. Something like this:

@NgModule({
    imports: [
        RouterModule.forRoot([
            { path: 'welcome', component: WelcomeComponent },
            {
                path: 'products',
                canActivate: [ AuthGuard ],
                data: { preload: true },
                loadChildren: 'app/products/product.module#ProductModule'
            },
            { path: '', redirectTo: 'welcome', pathMatch: 'full' },
            { path: '**', component: PageNotFoundComponent }
        ], { enableTracing: true })   //<- Add this here
    ],
    exports: [ RouterModule ]
})
export class AppRoutingModule { }

Upvotes: 3

Related Questions