javascript - 子路由在延迟加载中不起作用

Question

我正在编写一个 Angular 8 应用程序，我正在尝试延迟加载一些模块，并且其中有一些子路由。但是，延迟加载工作良好，但问题是子路由不起作用，我面临此错误消息

错误:未捕获( promise 中):错误:无法匹配任何路由。 URL 段:“商店/主要商店”错误:无法匹配任何路由。 URL 段:'stores/main-stores'

这是父路由模块

import { LogInComponent } from './log-in/log-in.component';
import { HomeComponent } from './home/home.component';
import { Routes, RouterModule } from '@angular/router';
import { from } from 'rxjs';

const routes: Routes =
  [
    { path: '', component: LogInComponent },
    { path: 'log-in', component: LogInComponent },
    { path: 'home', component: HomeComponent },
    { path: 'stores', loadChildren:'./stores/stores.module#StoresModule'},


    //{ path: '**', component: LogInComponent },  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

这是惰性路由模块

import { Routes, RouterModule } from '@angular/router';
import { StorsComponent } from '../home/stores/stors/stors.component';
import { MainStoresComponent } from '../home/stores/main-stores/main-stores.component';
import { InventStorComponent } from '../home/stores/invent-stor/invent-stor.component';
import { TransStoreComponent } from '../home/stores/trans-store/trans-store.component';


const routes: Routes = [
  {path:'',component:StorsComponent,children:[
    {path:'MainStores',component:MainStoresComponent},
    {path:'InventStores',component:InventStorComponent},
    {path:'TransStores',component:TransStoreComponent},

  ]},
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StoresRoutingModule { }

这是惰性模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { StoresRoutingModule } from './stores-routing.module';
import { StorsComponent } from '../home/stores/stors/stors.component';
import { MainStoresComponent } from '../home/stores/main-stores/main-stores.component';
import { InventStorComponent } from '../home/stores/invent-stor/invent-stor.component';
import { TransStoreComponent } from '../home/stores/trans-store/trans-store.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    StorsComponent,
    MainStoresComponent,
    InventStorComponent,
    TransStoreComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    StoresRoutingModule,
    Ng2SmartTableModule,
    FormsModule,
    ReactiveFormsModule,
    AngularMyDatePickerModule,

  ]
})
export class StoresModule { }

heere是惰性组件Html

<div class="stores_content">
  <div class="quickLink">
    <a class="btn btn-outline-primary " routerLink="main-stores" routerLinkActive="active"><i class="fa fa-box"></i>معرف المخازن</a>
    <a class="btn btn-outline-primary" routerLink="invent-stor"routerLinkActive="active"><i class="fa fa-tasks"></i>جرد المخزن</a>
    <a class="btn btn-outline-primary" routerLink="trans-store"routerLinkActive="active"><i class="fa fa-dolly"></i> تحويل مخزون</a>
  </div>
  <div class="storeTbls">
    <router-outlet></router-outlet>
  </div>
</div>

当我单击任何链接将我路由到子组件时，问题发生了那么有什么办法可以处理吗？注意:我是大佬

Answer 1

请参阅 stackblitz 中的此示例

在你的 app-routing.module.ts 文件中以这种方式使用

const routes: Routes = [
  {
   path: 'customers',
   loadChildren: 'src/app/customers/customers.module#CustomersModule'
  },
  {
   path: 'orders',
   loadChildren: 'src/app/orders/orders.module#OrdersModule'
  },
  {
   path: '',
   redirectTo: '',
   pathMatch: 'full'
  }
];