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']"
)
/
. 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
.