Angular Router endless loop with canActivate / redirectTo

Question

I'm having trouble getting a redirect in my routing module working, and adding an AuthGuard in CanActivate complicates it even further. Here is a simplified router:

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: 'home',
    component: HomeComponent,
  },
  {
    path: 'secret',
    component: SecretComponent,
    canActivate: [ AuthGuard ]
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
];

With this current setup, I get some strange behavior. Every route is considered a child of the path: '' route, so going to '' brings you to '/home'. If I refresh the page, I go to '/home/home'. This goes for login as well - navigation to '/login' will actually take you to '/login/home'. If you refresh any of these pages after the extra '/home' has been tacked onto the end, it causes the page to error out.

The authguard is just another complication, what with it navigating the user around based on authentication status.

Things I have tried:

Removing the authguard
Changing the order of the path declarations
Having only a single path + blank path redirecting to it
pathMatch: 'prefix'
Using '**' as the redirect route
Upgrading to Angular 12
Deleting / recreating the entire routing module

I'm comparing this to some functioning production projects, example tutorials, etc. Everything seems to be in place. Not sure what's going wrong.

NOTE: The project is in Angular 9 for some reason I just noticed even though I just made it recently. It might be worth updating early on, but I don't think that's relevant to the issue.

UPDATE: I updated to Angular 12, it had no effect. And actually I noticed that NO routes are working. So navigating to /secret or /login does nothing.

Here is a new config:

    const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent,
  },
  {
    path: '',
    component: HomeComponent,
  },
  {
    path: 'secret',
    component: SecretComponent,
    canActivate: [ AuthGuard ]
  },
];

With that layout, I can navigate to '' and I see the home component. If I navigate to '/login', I see the home component. If I click a button that calls this.router.navigate(['/', 'login']); the page is now at '/login' and shows the login component. If I refresh that page, I then see the home component while still on the same '/login' route that was just showing the login component before. I am very confused.

Whenever I navigate to a route, for example "localhost:4200/login" it will change the URL to "localhost:4200/login/". If I refresh with that url or renavigate to that url with the slash at the end, I see a number of 404 errors in the console and nothing from the app template loads in. (Such as the footer component.)

UPDATE 2: I created a new Angular project and have basically the exact same route setup and everything is functioning as expected. I don't know if just recreating everything is the correct next step, but it's looking awfully tempting.

How is `Routes` being consumed, i.e. can you show what your RoutingModule looks like? — Mordred, Dec 02 '21 at 15:41
The routing module basically looks the way I posted above. The way it is exported is basically just: `@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }` It is then imported into the app module. — Luke Peña, Dec 02 '21 at 15:53
Based on your second update, something is setup wrong in your first project, but I can't figure out what it is based on the information you've shown which all seems correct. At this point I'd probably commit the working project to source code control, and then start dragging components over from the non-working project. — Mordred, Dec 02 '21 at 16:42

score 0 · Answer 1 · answered Dec 02 '21 at 03:06

0

Try setting up your routes like this:

const routes: Routes = [
    { path: 'login', component: LoginComponent, },
    { path: 'home', component: HomeComponent, },
    {
        path: 'secret',
        component: SecretComponent,
        canActivate: [ AuthGuard ]
    },
    { path: '**', redirectTo: '/home' },
];

Don't redirect from '' just redirect from '**'. You don't seem to want anything to show if the path is just https://example.com/, so don't include a route for that -- '**' will pick it up.

answered Dec 02 '21 at 03:06

Mordred

3,734
3
36
55

The same issue occurs - I navigate to localhost:4200, it then redirects me to home. I refresh the page, it redirects me to /home/home. I go to login, I get redirected to login/home. I tried removing the '**' or '' route altogether, but that seems to break the router. So not that I guess. – Luke Peña Dec 02 '21 at 13:26
Also my understanding of the use of '\*\*' is a catchall for, say, a "page not found" page. So '' would redirect to a central page and '\*\*' is basically a 404 page. – Luke Peña Dec 02 '21 at 15:21
@LukePeña if you remove the auth guard does it work? – Mordred Dec 02 '21 at 15:38
The authguard makes no difference, removed or present the bug still occurs. – Luke Peña Dec 02 '21 at 15:51

Angular Router endless loop with canActivate / redirectTo

1 Answers1