One infinite redirect loop in an Angular application

Question

I'm doing an Angular application with the following routing:

const routes: Routes = [
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  },
  {
    path: '',
    component: HomeLayoutComponent,
    canActivate: [AuthGuardService],
    children: [
      {
        path: 'users',
        component: UsersComponent,
      },
      {
        path: 'detail/:id',
        component: UserComponent,
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        data: {
          expectedRole: 'admin'
        }
      },
      {
        path: 'home',
        loadChildren: './views/home/home.module#HomeModule',
        data: {
          preload: true,
          delay: false
        }
      },
      {
        path: 'error',
        component: ErrorComponent
      },
    ]
  },
];

If I'm not logged in and I request any secured url, like for example http://localhost:4200/users or http://localhost:4200/dashboard then there is a redirect to the http://localhost:4200/ and the application goes into an infinite loop. If I'm logged in then it works fine.

The browser console displays the following message Navigation triggered outside Angular zone.

Here is my auth guard service:

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const expectedRole = route.data.expectedRole ? route.data.expectedRole : null;
    const tokenPayload = this.tokenService.getDecodedAccessToken();
    return this.authService.isAuthenticated()
    .pipe(
      map(isAuth => {
        if (!isAuth) {
          this.router.navigate(['login']);
          return false;
        } else {
          return true;
        }
      }),
      catchError((error, caught) => {
        return of(false);
      })
    );
  }

  canLoad(): Observable<boolean> {
    if (this.authService.isAuthenticated()) {
      return of(true);
    } else {
      return of(false);
    }
  }

I'm on Angular 7

EDIT: The issue is now resolved with the following auth guard:

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.authService.isAuthenticated()
    .pipe(
      map(isAuthenticated => {
        if (!isAuthenticated) {
          this.authService.setPostLoginRedirectUrl(state.url);
          this.router.navigate(['login']);
          return false;
        } else {
          return true;
        }
      }),
      catchError((error, caught) => {
        return of(false);
      })
    );
  }

and the following routes:

const routes: Routes = [
  {
    path: '',
    component: LoginLayoutComponent,
    children: [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full'
      },
      {
        path: 'login',
        component: LoginComponent
      }
    ]
  },
  {
    path: '',
    component: HomeLayoutComponent,
    canActivateChild: [AuthGuardService],
    children: [
      {
        path: 'users',
        component: UsersComponent,
      },
      {
        path: 'detail/:id',
        component: UserComponent,
      },
      {
        path: 'dashboard',
        component: DashboardComponent,
        data: {
          expectedRole: 'admin'
        }
      },
      {
        path: 'home',
        loadChildren: './views/home/home.module#HomeModule',
        data: {
          preload: true,
          delay: false
        }
      },
      {
        path: 'error',
        component: ErrorComponent
      },
    ]
  },
];

Both your `LoginLayoutComponent` and your `HomeLayoutComponent` have the same path: `''` — user184994, Oct 15 '18 at 18:46
It's because they have child routes. See https://stackoverflow.com/a/46531192/958373 for an example. — Stephane, Oct 15 '18 at 20:50
I think @user184994 is right. Even though they have child routes, you need to specify the name of the parent routes. — Huske, Oct 15 '18 at 22:14
@Stephane What's the purpose of having a redirect to inside login? Also what happens if you are not logged in and try to access a non-protected path? — Avin Kavish, Oct 15 '18 at 23:55
@AvinKavish Sorry, I saw your last comment after my resolving the issue. — Stephane, Oct 16 '18 at 09:35

Melissa Heying · Answer 1 · 2021-02-09T17:39:18.093

EDIT: Found out the culprit! In app.module.ts you need to import AuthModule first. Doing this will allow you to use the path '**' in either 'auth-routing.module.ts' or 'app-routing.module.ts'

@NgModule({

  imports: [
    AuthModule,
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    SharedModule
  ],
})

I was having an infinite loop issue as well. Not sure if this relates to yours but for me I had two routing files. 'app-routing.module.ts' and 'auth-routing.module.ts'. I moved the code below from ' app-routing.module.ts' into 'auth-routing.module.ts' and no more infinite loops! Hope this helps you in some way!

 {
    path: '**',
    redirectTo: 'my-route',
  }

score 0 · Answer 2 · answered Oct 15 '18 at 18:39

0

redirectTo value should always have a leading / as it represents the actual route the user should be navigated to.

Change redirectTo: 'login', to redirectTo: '/login', in your Route Config

Also, this:

this.router.navigate(['login']);

should be

this.router.navigate(['/login']);

answered Oct 15 '18 at 18:39

SiddAjmera

38,129
5
72
110

I added the slash prefix but it changed nothing on the issue. Again, the issue only occurs when not logged in. – Stephane Oct 15 '18 at 20:50
There is no need for slash prefixes inside `navigate`, that is `navigateByUrl()` – Avin Kavish Oct 16 '18 at 00:02

score 0 · Answer 3 · answered Oct 16 '18 at 00:16

I don't have an exact soution for you, just a few this suggestions for debugging. Try expressing this as:

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

to see if it is the route redirect.

Try replacing this with,

this.router.navigateByUrl('/login');

or

this.router.navigate(['', 'login']);

score 0 · Answer 4 · answered Feb 09 '20 at 13:47

For my problem, the order of import impacts on this error.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    CommonModule,

    AccountModule, // Load other eager modules first
    AppRoutingModule // Move this AppRouting to the end like this
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

score 0 · Answer 5 · answered Jul 20 '20 at 15:02

0

In my case (topic is similar) when I was getting loop it was AuthGuard on Login route.

{ path: 'login', component: LoginFormComponent, canActivate: [AuthGuard], }

To fix this I just removed guard from Login route.

answered Jul 20 '20 at 15:02

Marian Turchyn

519
5
6

One infinite redirect loop in an Angular application

5 Answers5