es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Enrutamiento de Angular con carga diferida.

Estoy recibiendo el siguiente error:

          core.js:6210

           ERROR Error: No capturado (en promesa): Error: No se pueden coincidir ninguna ruta. Segmento de URL: 'home/product'

     Error: No se pueden coincidir ninguna ruta. Segmento de URL: 'home/product'
          en ApplyRedirects.noMatchError (router.js: 2628)
          en selector de CatchSubscriber (router.js:2610)
          en error de CatchSubscriber (catchError.js:27)
          en _error de MapSubscriber (Subscriber.js:75)
          en error de MapSubscriber (Subscriber.js:55)
          en _error de MapSubscriber (Subscriber.js:75)
          en error de MapSubscriber (Subscriber.js:55)
          en _error de ThrowIfEmptySubscriber (Subscriber.js:75)
          en error de ThrowIfEmptySubscriber (Subscriber.js:55)
          en _error de TakeLastSubscriber (Subscriber.js:75)
          en resolvePromise (zone-evergreen.js:1213)
          en resolvePromise (zone-evergreen.js:1167)
          en zone-evergreen.js:1279
          en ZoneDelegate.invokeTask (zone-evergreen.js:406)
          en Object.onInvokeTask (core.js: 28578)
          en ZoneDelegate.invokeTask (zone-evergreen.js:405)
          en Zone.runTask (zone-evergreen.js:178)
          en drainMicroTaskQueue (zone-evergreen.js:582)
      Error: No capturado (en promesa): Error: No se pueden coincidir ninguna ruta. Segmento de URL: 'home/product'

Estoy construyendo este ejemplo de Angular para probar la ruta.

eso significa

& gt; appmodule – & gt; homedule – & gt; carga perezosa de producto1

          importar {NgModule} de & amp; # 39; @angular / core & amp; # 39 ;;
          importar {BrowserModule} de & amp; # 39; @ angular / platform-browser & amp; # 39;;

          importar {AppRoutingModule} de & amp; # 39; ./app-routing.module & amp; # 39 ;;
          importar {AppComponent} from & amp; # 39; ./app.component & amp; # 39 ;;
          importar {BrowserAnimationsModule} from & amp; # 39; @angular / platform- browser / animations & amp; # 39 ;;
          @NgModule ({
            declaraciones: [
              AppComponent,
            ],
            importaciones: [
              BrowserModule,
              BrowserAnimationsModule,
              AppRoutingModule,
            ],
            proveedores: [],
            arranque: [AppComponent]
          })
          exportar clase AppModule {}


          

<

h1> Componente de la aplicación appcomponent.html < / h1>
          < router-outlet > & lt; / router-outlet & gt;
          


          importar {NgModule} de & amp; # 39; @angular / core & amp; # 39 ;;
          importar {RouterModule, Rutas} from & amp; # 39; @angular / router & amp; # 39 ;;
          importar {HomeComponent} from & amp; # 39; ./home/home.component & amp; # 39 ;;

          const routes: Routes = [
            {path: & amp; # 39; & amp; # 39 ;, redirectTo: & amp; # 39; home & amp; # 39 ;, pathMatch: & amp; # 39; full & amp; # 39;},
            {path: & amp; # 39; home & amp; # 39 ;, component: HomeComponent}
          ];
          @NgModule ({
            declaraciones: [],
            importaciones: [RouterModule.forRoot(routes)],
            exportaciones: [RouterModule]
          })
          exportar clase AppRoutingModule {}


          importar {NgModule} de & amp; # 39; @angular / core & amp; # 39 ;;
          importar {CommonModule} from & amp; # 39; @angular / common & amp; # 39 ;;

          importar {HomeRoutingModule} de & amp; # 39; ./home-routing.module & amp; # 39 ;;
          importar {HomeComponent} from & amp; # 39; ./home.component & amp; # 39;;

          @NgModule ({
            declaraciones: [
              HomeComponent
            ],
            importaciones: [
              CommonModule,
              HomeRoutingModule
            ]
          })
          exportar clase HomeModule {}


          < p & gt; ¡El hogar funciona! homecomponent.html < / p & gt;
          


          importar {NgModule} de & amp; # 39; @angular / core & amp; # 39 ;;
          importar {RouterModule, Rutas} de & amp; # 39; @angular / router & amp; # 39 ;;

          const routes: Routes = [
            {path: & amp; # 39; & amp; # 39 ;, redirectTo: & amp; # 39; product & amp; # 39 ;, pathMatch: & amp; # 39; full & amp; # 39;},
            {path: & amp; # 39; product & amp; # 39 ;, loadChildren: () => import (& amp; # 39; .. /feature / producto / product.module & amp; # 39;). then (m => m.ProductModule)}
          ];

          @NgModule ({
            importaciones: [RouterModule.forChild(routes)],
            exportaciones: [RouterModule]
          })
          exportar clase HomeRoutingModule {}


          importar {NgModule} de & amp; # 39; @angular / core & amp; # 39 ;;
          importar {CommonModule} from & amp; # 39; @angular / common & amp; # 39 ;;

          importar {ProductRoutingModule} de & amp; # 39; ./ product-routing.module & amp; # 39; ;;
          importar {Product1Component} from & amp; # 39; ./product1/product1.component & amp; # 39;;

          @NgModule ({
            declaraciones: [
              Product1Component
            ],
            importaciones: [
              CommonModule,
              ProductRoutingModule
            ]
          })
          exportar clase ProductModule {}


          importar {NgModule} de & amp; # 39; @angular / core & amp; # 39 ;;
          importar {RouterModule, Rutas} de & amp; # 39; @angular / router & amp; # 39 ;;
          importar {Product1Component} from & amp; # 39; ./product1/product1.component & amp; # 39;;

          const routes: Routes = [
            {path: & amp; # 39; & amp; # 39 ;, component: Product1Component}
          ];

          @NgModule ({
            importaciones: [RouterModule.forChild(routes)],
            exportaciones: [RouterModule]
          })
          exportar clase ProductRoutingModule {}


          < p & gt; ¡Producto1 funciona! product1component.html < / p & gt;
          


app /
app.module.ts
app.routing.module.ts
hogar /
home.module.ts
home.routing.module.ts
homecomponent
característica
módulo de producto.ts
producto.routing.module.ts
producto1
producto1componente
producto1componente. html

esa es la estructura básica y necesito algunas sugerencias
módulo de aplicaciones a módulo de inicio, luego estoy haciendo la carga perezosa del módulo de productos para el producto1.
gracias

Tags:  ,

Answer

  1. Avatar for davy.ai

    Parece que el error está relacionado con la navegación hacia el segmento de URL “home/product”, que no puede ser emparejado con ninguna de las rutas definidas.

    Según el código proporcionado, la estructura de enrutamiento es la siguiente:

    • AppModule – contiene el componente de la aplicación y el módulo de enrutamiento de la aplicación
    • AppRoutingModule – define las rutas para la aplicación, incluyendo una ruta predeterminada que redirige al componente home
    • HomeModule – contiene el componente home y el módulo de enrutamiento de home
    • HomeRoutingModule – define las rutas para el módulo de home, incluyendo una ruta de carga diferida para el módulo de producto
    • ProductModule – contiene el componente de producto1 y el módulo de enrutamiento de producto
    • ProductRoutingModule – define las rutas para el módulo de producto, incluyendo una ruta para el componente de producto1

    Para acceder al componente de producto1, la URL correcta debería ser “home/product/product1”. Esto corresponde a la ruta de carga diferida definida en HomeRoutingModule como “product”.

    Para evitar este error, asegúrese de navegar hacia la URL correcta que coincide con las rutas definidas. Además, verifique las definiciones de ruta y asegúrese de que sean correctas y consistentes con los componentes y módulos en la aplicación.

Comments are closed.