Question

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

这是我的App-Routing Module

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 { }

在这里使用Cliente模块......

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

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

来自延迟加载模块的Angular 2延迟加载模块

2 个答案: