Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 317
Samuel Pereira Avatar asked Apr 16 '19 13:04

Samuel Pereira


People also ask

What is default routing in Angular?

Default is "/" (the root path). The path-matching strategy, one of 'prefix' or 'full'. Default is 'prefix'. By default, the router checks URL elements from the left to see if the URL matches a given path and stops when there is a config match.

What is activated routing in Angular?

What is an activated route? The Angular Docs define the ActivatedRoute as. A service that is provided to each route component that contains route specific information such as route parameters, static data, resolve data, global query params and the global fragment.

What is redirecting routes in Angular?

When the application start, it navigates to the empty route by default. We can configure the router to redirect to a named route by default. So, a redirect route translates the initial relative URL (”) to the desired default path.


1 Answers

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.

like image 186
Samuel Pereira Avatar answered Sep 22 '22 13:09

Samuel Pereira