CODEWITHSUNDEEP
angular
Benjamin Fontaine
Benjamin Fontaine

Reputation: 41

Nested router infinite loop Angular

I'm trying to do a simple page with a header, a menu and a content div When someone click on a ancor of the menu, I want the content div to be populated with the page corresponding to the route associated. And, for now, I'd just want for this commun page (header, menu and content) to match any routes.

The appComponent is just here to route to other components :

app-component.html

<router-outlet></router-outlet>

The component containing the header, menu and content is called LayoutComponent :

layout-component.html 

<div>
    <app-menu></app-menu>
    <router-outlet></router-outlet>
</div>

and my routing configuration is as follow : 

export const routes: Routes = [
  {
    path: 'login',
    redirectTo: 'login',
    pathMatch: 'full'
  },
  {
    path: 'common',
    loadChildren: 'app/dsia-common/dsia-common.module'
  },
  {
   path: 'home',
   redirectTo: '',
   pathMatch: 'full'
  },
  {
   path: '',
   component: LayoutComponent,
   children: [
  {
    path: '**',
    pathMatch: 'full',
    canActivate: [AuthGuardService],
    component: GenericPageComponent
  }
]

When browsing on my site, on localhost:4200/,

I'm expecting a login page to popup up (the AuthGuardService is redirecting me to the login route). And after a successful login, the login component is redirecting to the home page. And the home page should use the LayoutComponent to display the header, the menu and the content in the nested router-outlet. And it should do so for every url. So to sum up

/ -> (trigger) canActivate[AuthGuardService] --> (redirect to) /login --> (on success redirect to) /home --> (redirect to) / --> LayoutComponent

Unfortunaley my page isn't loading as the login page get called recursively (a navigation cancel event is always called). And I think this is due to the fact that the AuthGuardService is used when the /login path is called (so the login route get cancelled and it's redirected to the login route, and so on...). Which should be the case as per my understanding.

Can someone point me to what I'm obviously missing here ?

Thanks you very much.

Regards. Benjamin

Upvotes: 1

Views: 5165

Answers (1)

Ulrich Dohou
Ulrich Dohou

Reputation: 1559

You redirect login to login. It is normal that there is an infinite loop. Try changing your routing configuration. Here is a sample.

export const routes: Routes = [
{
  path: '',
  redirectTo: 'login',
  pathMatch: 'full'
},
{
  path: 'login',
  component: LoginComponent,
}
]

Upvotes: 1

Related Questions