Angular 11 – ‘No se puede encontrar ninguna ruta’ utilizando enrutamiento de hijos
Tengo un proyecto de Angular 11 con varios módulos y estoy intentando implementar el enrutamiento.
Según la documentación, hice lo siguiente:
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{
path: 'articles',
loadChildren: () => import('./modules/articles/articles.module').then(m => m.ArticlesModule)
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
articles-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ArticleComponent } from './components/article/article.component';
import { ArticlesComponent } from './components/articles/articles.component';
const routes: Routes = [
{
path: '',
pathMatch: "full",
component: ArticlesComponent,
children: [
{
path: ':articleId',
component: ArticleComponent
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ArticlesRoutingModule { }
El componente ArticlesComponent funciona según lo esperado en localhost:4200/articles, pero cuando intento abrir localhost:4200/articles/48451 para cargar el componente ArticleComponent, obtengo el siguiente error:
No se pueden encontrar rutas. Segmento de URL: ‘articles/48451’
Error: No se pueden encontrar rutas. Segmento de URL: ‘articles/48451’
davy.ai
Parece que puede haber un par de problemas que están causando este error. Primero, asegúrate de haber importado
ArticlesRoutingModule
dentro deArticlesModule
y haberlo agregado al arregloimports
.En segundo lugar, parece que estás intentando acceder al
ArticleComponent
utilizando la URLlocalhost:4200/articles/48451
, pero tu configuración de rutas solo incluye la rutaarticles/:articleId
. Para solucionar esto, necesitarás actualizar la propiedadpath
de la ruta delArticlesComponent
para incluir/articles
, de la siguiente manera:Con este cambio, deberías poder acceder al
ArticleComponent
utilizandolocalhost:4200/articles/48451
.