Angular routing keep redirecting to home when inputing valid url at browser

Question

I had this routing configurations and it works perfecly, only one thing keeps anoying me: even though navigating the app works, when I go to address bar and hit enter, it redirects me to /dashboard even if I don't change the url and hit enter.

Here is my routes configuration:

import { Routes } from '@angular/router';

import { FullComponent } from './layouts/full/full.component';

export const Approutes: Routes = [
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: 'usuarios',
        loadChildren: './pages/usuarios/usuarios.module#UsuariosModule'
      },
      {
        path: 'autores',
        loadChildren: './pages/autores/autores.module#AutoresModule'
      },
      {
        path: 'conteudos',
        loadChildren: './pages/conteudos/conteudos.module#ConteudosModule'
      },
      {
        path: 'projetos',
        loadChildren: './pages/projetos/projetos.module#ProjetosModule'
      },
      {
        path: 'dashboard',
        loadChildren: './pages/dashboard/dashboard.module#DashboardModule'
      },
    ]
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginModule'
  },
  {
    path: '',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }
];

Another thing I noticed, when I hit enter and watch my network, I can see that the resolver for that page is called but then I get redirected to /dashboard.

Thank you all in advance.

Edit: Funny thing, I tried to remove completely dashboard route and kept only other routes, for any reason (or magic) my app still try to reach dashboard route, in one debug I found something like 'lazy route loading'.

Edit 2: I ended up reaching in router log this: "Navigation ID 1 is not equal to the current navigation id 2" then I keep struggling and decided to change my router module, instead of returning and const and on AppModule calling RouterModule.forRoot(Approutes) I changed to this:

import { Routes, RouterModule } from '@angular/router';

import { FullComponent } from './layouts/full/full.component';
import { NgModule } from '@angular/core';

const routes: Routes = [
  {
    path: '',
    component: FullComponent,
    children: [
      {
        path: 'dashboard',
        loadChildren: './pages/dashboard/dashboard.module#DashboardModule'
      },
      {
        path: 'usuarios',
        loadChildren: './pages/usuarios/usuarios.module#UsuariosModule'
      },
      {
        path: 'autores',
        loadChildren: './pages/autores/autores.module#AutoresModule'
      },
      {
        path: 'conteudos',
        loadChildren: './pages/conteudos/conteudos.module#ConteudosModule'
      },
      {
        path: 'projetos',
        loadChildren: './pages/projetos/projetos.module#ProjetosModule'
      }
    ]
  },
  {
    path: 'login',
    loadChildren: './pages/login/login.module#LoginModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true})],
  exports: [RouterModule]
})

export class AppRoutingModule { }

BUT it not solved at first, and based on the error that I got in logs mentioned above, I wondered if my resolves was messing things up.

In child routes I have something like:

const routes: Routes = [
  {
    path: '',
    component: UsuariosIndexComponent,
    resolve: {
      paginacao: UsuariosPageResolver
    }
  }
];

and in my resolver I have:

export class UsuariosPageResolver implements Resolve<any> {
  pagina = 1;
  itensPorPagina = 10;
  filtro = '';
  constructor(private usuariosService: UsuariosService) { }

  resolve() {
    return this.usuariosService.paginar(this.pagina, this.itensPorPagina, this.filtro);
  }
}

The fact is that when I changed the routes and commented the resolve call, it worked, BUT when I uncommented the resolve it kept working :)

I'm will keep watching this and any new result I will edit this.

Edit3: BREAKING NEWS even though I didn't implemented anything about AuthGuard or interceptor or anything alike, the error occurs when I log in, if I clear site data then it work again.

Answer 1

It means some of the guard service preventing due to some error.

you can remove the guard one by one from the routing file to identify the exact guard file. Then debug why that guard not allows.

Note: the data you using to validate inside the guard is not available at the time of guard check execution. You probably have to get ready for those data when the app gets initialize. (Check for APPINITILIZER for more details)

Answer 2

Who could guess?

My problem was nothing about routes, it was a service that controls autentication and I mistakenly put at constructor a wrong condition:

if (loggedUser !== null) ths.router.navigateToUrl('/dashboard');

so when I logged in and navigate through menu it goes well, but when I hit reload or input an URL manually then we got the "bug" (or feature, lol) because the constructor is called again and then the redirect occurs.

In my defence, this all happened because I disabled all app security to speed testing up, but got sucked at this for time enough to lose some hair.

Well, thank you all.

Answer 3

You have two identical paths defined, one for FullComponent, another for redirecting to dashboard:

    path: '',  <---------------------- Empty path
    component: FullComponent,
    children: [ ... ]
  }, 
  {
    path: '', <---------------------- Empty path
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }

Was your intention in the last route definition to redirect users to dashboard for unknown routes? If so, you need to use ** wildcard:

  {
    path: '**',
    redirectTo: '/dashboard',
    pathMatch: 'full'
  }