Angular 2 在延迟加载模块中延迟加载模块

Question

我正在开发一个简单的网页，其中有一个主页模块，其中包含两个组件，主页和登录，我使用延迟加载加载...

这是我的应用程序路由模块

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: 'app/home/home.module#HomeModule' },
  { path: 'main', loadChildren: 'app/main/main.module#MainModule' }
];

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

这是我的家庭模块...

const routes = [
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent }
]

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    ReactiveFormsModule
  ],
  declarations: [
    HomeComponent,
    LoginComponent
  ],
  providers: [
    AuthService
  ]
})
export class HomeModule { }

这部分工作正常，正如预期的那样。我遇到的问题是当我进入主模块时...我正在尝试延迟加载我的客户端模块

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full', children: [
    { path: 'clientes', loadChildren: 'app/clientes/clientes.module#ClientesModule' }
  ]},
];

@NgModule({
  imports: [
    CommonModule,
    MainRoutingModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    MainComponent,
    HeaderComponent,
  ],
})
export class MainModule { }

这里有客户端模块...

const routes: Routes = [
  { path: '', component: ClientesComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    ClientesComponent,
    ClientesOperacoesComponent,
    SearchTableComponent
  ],
  providers: [
    MainService
  ]
})
export class ClientesModule { }

一切正常，直到我尝试访问'/main/clientes'。它说它无法匹配任何路由：“main/clientes”。现在我尝试了多种方法来解决这个问题，但总是同样的问题，如果您能发现我的逻辑中的任何错误，我将非常感激。

谢谢！

Answer 1

我在这里查看你的主要模块路线：

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full', children: [
    { path: 'clientes', loadChildren: 'app/clientes/clientes.module#ClientesModule' }
  ]},
];

可能应该是

const routes: Routes = [
  { path: '', redirectTo: 'main', pathMatch: 'full' },
  { path: 'clientes', loadChildren:'app/clientes/clientes.module#ClientesModule'}
];

Answer 2

您好，我认为您应该更改主要路线的结构，如下所示：

const routes: Routes = [
  { 
    path: '', 
    children [
       { 
         path: 'clientes',
         loadChildren:'app/clientes/clientes.module#ClientesModule'
       }
    ]
  }
];

我认为当你已经加载到同一个模块时，你不应该重定向到同一个模块，因为你可能会陷入循环路由的情况。