0

Estoy desarrollando mi aplicación en angular, por lo cual por cuestiones de mantenibilidad, coherencia y escalabilidad, quiero tener mis rutas separadas cada una en el modulo que corresponde:

  • Security
  • Order
  • Etc

Para lograr tal motivo, me guie basándome en la documentación de angular sobre ruteo y este video (pero lo había deja de lado esa forma de navegar por este problema, que no se si al final es una mejor opción), quedando el ruteo inicial de mi aplicación de la siguiente manera:

app.component.html

<router-outlet></router-outlet>

main-layout.component

<app-header></app-header>

<app-sidenav> 
  <ng-container routerOutlet> 
    <router-outlet></router-outlet>
  </ng-container>
</app-sidenav>

app-routing.module

  const routes: Routes = [
  {
    path: 'order',
    loadChildren: () => import('@appRoot/modules/order/order.module').then(x => x.OrderModule)
  },

  // Otros modulos...

  { path: '',   redirectTo: 'notfound', pathMatch: 'full' },
  { path: '**', component: NotFoundComponent }
];

order-routing.module

    const routes: Routes = [
  {
    path: '',
    component: MainLayoutComponent,
    children: [
      {
        path: '',
        children: [
          { path: 'tablelist', component: TableListComponent },
          { path: 'createtable', component: CreateTableComponent },

          { path: 'dineinlist', component: DineInListComponent }
        ]
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

El problema que estoy teniendo es que inicialmente parece que el ruteo funciona. Si yo me ruteo con un <a> de la siguiente forma:

<a [routerLink]="['tablelist']">Mesas</a>

Me redirige a la URL http://localhost:4200/tablelist o a cualquiera de las URL colocadas a nivel del sidenav, pero, si dentro de este componente hago click en un botón de crear mesa para dirigirme a mi CreateTableComponent, la URL me dice que no encontró la pagina, mostrando esta URL en el depurador: http://localhost:4200/createtable/userlist. Y si a modo de prueba, coloco un <a> dentro de este componente para redirigirme a un componente de listado de usuarios, obtengo esta URL: http://localhost:4200/tablelist/createtable/userlist. ¿Por qué me hace esta concatenación de URLs si navego dentro de componentes, en lugar de iniciar de cero buscando la URL que coincida? (por ejemplo en lugar de http://localhost:4200/tablelist/createtable mas bien http://localhost:4200/createtable al navegar con [routerLink]="['createtable']")

2
  • 1
    si quieres navegar a una ruta absoluta tienes que indicarlo con la /. Si no por defecto, te cogerá como ruta padre la actual y le concatenará la que tenga el link. Si desde order module quieres ir a user module. Tienes que poner la ruta con la barra /userlist.
    – hawks
    Commented el 17 jul. 2021 a las 13:46
  • Era eso, me falto el entendimiento de es parte. ¿Lo podrías poner como respuesta (anexando alguna información extra si te parece muy corta) así la marco como tal?
    – Orion
    Commented el 17 jul. 2021 a las 13:59

1 respuesta 1

1

Para navegar a un módulo que no está dentro de la ruta actual tienes que usar la ruta absoluta, es decir, indicarlo con la /.

Si no por defecto, te cogerá como ruta padre la actual y le concatenará la que tenga el link y angular intentará renderizar algún componente haciendo match con la ruta, de lo contrario mostrará el 404 (si está definido).

Por ejemplo, si desde order.module quieres ir a user.module tienes que poner la ruta con la barra /userlist.

Navegación entre rutas

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.