Question

我正在编写Angular 8应用程序，并且试图延迟加载某些模块，而我有一些子路由。但是，延迟加载工作正常，但问题是子路由失败，并且我遇到此错误消息

错误：未捕获（承诺）：错误：无法匹配任何路由。网址区隔：“商店/主要商店” 错误：无法匹配任何路线。网址段：“商店/主要商店”

这是父路由模块

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'
  }
];

子路线在延迟加载中不起作用

1 个答案: