0
412
ViewsNo se puede hacer que la ruta funcione con 2 niveles de módulos con carga diferida (anidados)
He estado tratando de crear una aplicación angular4 basada en cli de muestra con un módulo principal y 3 módulos de productos (el producto en sí es un parámetro de ruta que carga cada una de las pantallas del producto con pereza).
Aquí está mi muestra: https://github.com/shankarvn/angular4lazyloading
pasos para reproducir
clon de git https://github.com/shankarvn/angular4lazyloading.git
aplicación de discos compactos
instalar npm
ng servicio -p 4003
En el navegador localhost:4003 => Debería cargar 3 tarjetas que muestren producto1, producto2 y producto3. En este punto, haga clic en product1 y verá el cambio de ruta y la interfaz de usuario para las cargas de product1. Ahora haz clic en Dashboard y verás un error en la consola
ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'product1/dashboard' Error: Cannot match any routes. URL Segment: 'product1/dashboard' at ApplyRedirects.noMatchError (router.es5.js:1404) [angular] at CatchSubscriber.selector (router.es5.js:1379) [angular] at CatchSubscriber.error (catch.js:104) [angular]No estoy seguro de lo que estoy haciendo mal: solo que las rutas del tablero se cargan cuando el módulo product1 se carga con pereza. ¿No deberían registrarse las rutas cuando se carga el módulo product1? Cualquier ayuda es apreciada.
Gracias.
3 answers
Answer question0
No deberías usar pathMatch: 'full'
export const Product1Routes: Routes = [ { path: '', component: Product1Component, children:[ { path: 'dashboard', loadChildren: 'app/product1/dashboard/dashboard.module#DashboardModule' // or './dashboard/... }, { path: '', component: Product1ViewComponent } ] } ]; También cambié un poco la ruta de loadChildren . ( app/product1 añadido)
¿Por qué está importando HttpModule para cada uno de los módulos con carga diferida?
Esto también es redundante en módulos con carga diferida
providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }],PD : crearía módulos de enrutamiento para cada uno de los módulos
app-routing.module.ts product1-routing.module.ts dashboard-routing.module.tsy así
0
aquí hay un ejemplo práctico de carga diferida con rutas anidadas
https://github.com/PrashantMaheshwari-SoftwareEngineer/nested-route-lazy-loading
export const mainRoute: Route[] = [ { path: "login", component: LoginComponent }, { path: "home", loadChildren: "./layout/layout.module#LayoutModule" }, { path: "", redirectTo: "/login", pathMatch: "full" } ]; export const layoutRoute: Route[] = [ { path: "", component: LayoutComponent, children: [ { path: "dashboard", component: DashboardComponent }, { path: "employee", component: EmployeeComponent }, { path: "customer", component: CustomerComponent }, { path: "", redirectTo: "dashboard", pathMatch: "full" } ] } ];0
Probablemente relacionado con esta pregunta (corregido en Angular 5.2.1): ¿El comodín '**' del enrutador angular como un comodín con rutas secundarias? Usando la última versión 2.4.0 y el enrutador 3.4.1
Fue un error con el enrutador.