Блог

Я получаю следующую ошибку

 core.js:6210     ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/product'  Error: Cannot match any routes. URL Segment: 'home/product'  at ApplyRedirects.noMatchError (router.js:2628)  at CatchSubscriber.selector (router.js:2610)  at CatchSubscriber.error (catchError.js:27)  at MapSubscriber._error (Subscriber.js:75)  at MapSubscriber.error (Subscriber.js:55)  at MapSubscriber._error (Subscriber.js:75)  at MapSubscriber.error (Subscriber.js:55)  at ThrowIfEmptySubscriber._error (Subscriber.js:75)  at ThrowIfEmptySubscriber.error (Subscriber.js:55)  at TakeLastSubscriber._error (Subscriber.js:75)  at resolvePromise (zone-evergreen.js:1213)  at resolvePromise (zone-evergreen.js:1167)  at zone-evergreen.js:1279  at ZoneDelegate.invokeTask (zone-evergreen.js:406)  at Object.onInvokeTask (core.js:28578)  at ZoneDelegate.invokeTask (zone-evergreen.js:405)  at Zone.runTask (zone-evergreen.js:178)  at drainMicroTaskQueue (zone-evergreen.js:582)  Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'home/product'  

Я создаю этот угловой пример для тестирования маршрутизации.

это означает, что

модуль приложения — gt; домашний модуль — gt;gt; ленивая загрузка продукта1

 import { NgModule } from '@angular/core';  import { BrowserModule } from '@angular/platform-browser';    import { AppRoutingModule } from './app-routing.module';  import { AppComponent } from './app.component';  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';  @NgModule({  declarations: [  AppComponent,  ],  imports: [  BrowserModule,  BrowserAnimationsModule,  AppRoutingModule,  ],  providers: [],  bootstrap: [AppComponent]  })  export class AppModule { }  

 lt;h1gt;App Component appcomponent.htmllt;/h1gt;  lt;router-outletgt;lt;/router-outletgt;   

 import { NgModule } from '@angular/core';  import { RouterModule, Routes } from '@angular/router';  import { HomeComponent } from './home/home.component';    const routes: Routes = [  {path: '', redirectTo: 'home', pathMatch: 'full'},  {path: 'home', component: HomeComponent}  ];  @NgModule({  declarations: [],  imports: [RouterModule.forRoot(routes)],  exports: [RouterModule]  })  export class AppRoutingModule { }  

 import { NgModule } from '@angular/core';  import { CommonModule } from '@angular/common';    import { HomeRoutingModule } from './home-routing.module';  import { HomeComponent } from './home.component';      @NgModule({  declarations: [  HomeComponent  ],  imports: [  CommonModule,  HomeRoutingModule  ]  })  export class HomeModule { }   

 lt;pgt;home works! homecomponent.htmllt;/pgt;    

 import { NgModule } from '@angular/core';  import { RouterModule, Routes } from '@angular/router';    const routes: Routes = [  {path: '', redirectTo: 'product', pathMatch: 'full'},  {path: 'product', loadChildren: () =gt; import('../feature/product/product.module').then(m =gt; m.ProductModule)}  ];    @NgModule({  imports: [RouterModule.forChild(routes)],  exports: [RouterModule]  })  export class HomeRoutingModule { }  

 import { NgModule } from '@angular/core';  import { CommonModule } from '@angular/common';    import { ProductRoutingModule } from './product-routing.module';  import { Product1Component } from './product1/product1.component';      @NgModule({  declarations: [  Product1Component  ],  imports: [  CommonModule,  ProductRoutingModule  ]  })  export class ProductModule { }  

 import { NgModule } from '@angular/core';  import { RouterModule, Routes } from '@angular/router';  import { Product1Component } from './product1/product1.component';    const routes: Routes = [  {path: '', component: Product1Component}  ];    @NgModule({  imports: [RouterModule.forChild(routes)],  exports: [RouterModule]  })  export class ProductRoutingModule { }    

 lt;pgt;product1 works! product1component.htmllt;/pgt;    

 app/  app.module.ts  app.routing.module.ts  home/  home.module.ts  home.routing.module.ts  homecomponent  feature  product.module.ts  product.routing.module.ts  product1  product1component  product1component.html  

это базовая структура, и мне нужны некоторые предложения от модуля приложения к домашнему модулю, тогда я выполняю ленивую загрузку модуля продукта для product1 спасибо

в AppRoutingModule измените конфигурацию маршрута на

 const routes: Routes = [  {path: '', redirectTo: 'home', pathMatch: 'full'}   ];  

и в AppModule добавьте HomeModule в раздел импорта.

в HomeRoutingMoule измените конфигурацию маршрута на

 const routes: Routes = [  {path: '', component: HomeComponent},  {path: 'product', loadChildren: () =gt;  import('../feature/product/product.module').then(m =gt; m.ProductModule)} ];  

в модуле HomeModule добавьте модуль ProductModule в раздел импорт.