angular - 带有子路由的延迟加载模块

Question

我在尝试导航到 app/enter-transaction/product-select 时收到错误消息。

错误：无法匹配任何路由。URL 段：'app/enter-transaction/product-selection'

这是我实现路由的方式。（包括延迟加载模块）

App.routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LayoutComponent } from "./layout/layout.component";

const routes: Routes = [
  {
    path: "",
    redirectTo: "app",
    pathMatch: "full"
  },
  {
    path: "app",
    component: LayoutComponent,
    children: [
      {
        path: "enter-transaction",
        loadChildren: () =>
          import(
            "./modules/enter-transaction.module/enter-transaction.module"
          ).then(mod => mod.EnterTransactionModule)
      }
    ]
  },
  {
   path: "login",
    component: LoginComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule]
})
export class AppRoutingModule {}

进入事务模块

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { EnterTransactionRoutingModule } from "./enter- 
transaction.routing.model";

@NgModule({
  declarations: [],
  imports: [CommonModule, EnterTransactionRoutingModule]
})
export class EnterTransactionModule {}

进入交易路由模块

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";

import { ProductSelectionComponent } from "./../../enter- 
transaction/product-selection/product-selection.component";
import { InvestorDetailComponent } from "./../../enter- 
transaction/investor-detail/investor-detail.component";
import { EnterTransactionComponent } from "src/app/enter- 
transaction/enter-transaction.component";

const routes: Routes = [
  {
    path: "enter-transaction",
    component: EnterTransactionComponent,
    children: [
       {
        path: "product-selection",
        component: ProductSelectionComponent
      },
      {
        path: "investor-detail",
        component: InvestorDetailComponent
      }
    ]
  }
];

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

HTML结构

app.component.html

<router-outlet></router-outlet>

layout.component.html

<app-cxi-layout-header></app-cxi-layout-header>
<app-cxi-layout-sidemenu></app-cxi-layout-sidemenu>
<app-cxi-layout-content></app-cxi-layout-content>

cxi-layout-content.component.html

<div class="cxi-layout-outer-body ">
  <div class="cxi-layout-inner-body flex content-center">
    <router-outlet></router-outlet>
  </div>
</div>

输入-transaction.component.html

<h1>Enter-transaction > &&</h1>
<router-outlet></router-outlet>

产品选择.component.html

<p>product-selection works!</p>

我正在使用角度 8。如果我不使用延迟加载。它会正常工作。但是如果我使用延迟加载 enter-transaction 模块。它告诉我不能匹配任何路线。我希望我可以在正确的路径中看到产品选择组件的内容。

标签： angularangular-routing