Angular 角度4默认子路由不工作

我有以下结构的angular 4项目：

src
|- app
|  |- home
|  |  |- home.component.ts/html/scss
|  |  |- home.module.ts
|  |  |- home.routing.ts
|  |  |- products
|  |  |  |- products.component.ts/html/scss
|- app.component.ts/html/scss
|- app-routing.module.ts
|- app.module.ts

我的

app.routing.module.ts

文件包含以下内容：

const routes: Route[] = [
{
    path: "home", component: HomeComponent, canActivate: [AppAuthGuard]
  },
  {
    path: '', redirectTo: AppConstants.ROUTE_LOGIN, pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

和

home.routing.ts

包含以下子路由：

{
path: "home",
component: HomeComponent,
children: [
  {
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
 ]
}

---

在home.module.ts中，已使用

RouterModule.forChild（HomeRoutes）

导入子路由。home.component.html中有一个用于子路由的路由器出口。除默认子路由之外的所有路由（

http://localhost:4200/home

）工作成功（

http://localhost:4200/home/products

工作正常）<代码>http://localhost:4200/home没有错误，它只显示空白，因为路由器出口是空的。但如果我在

app.module.ts

中定义主组件的默认子路由，它就可以正常工作。我做错了什么，使它无法工作？

您可以像这样直接删除第一级配置吗。由于您已经将其路由到

home

，它正在

/home

路由中查找

/home

，因此根据配置，它将变为

http://localhost:4200/home/home

 [ 
   {
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  }
]

---

我通过延迟加载语法解决了这个问题，即

loadChildren

。以及移除第一级配置。在此之前，我需要重新构造代码，以导出主路由模块，并将其导入主模块。更改的文件如下：

home.routing.ts

：

const homeRoutes: Route[] = [
{
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
]
}
@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class HomeRoutingModule {}

const routes: Route[] = [
{
    path: "home", component: HomeComponent,  loadChildren: './home/home.module#HomeModule'
  },
  {
    path: '', redirectTo: "login", pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

然后

app.routing.module.ts

：

const homeRoutes: Route[] = [
{
    path: '',
    pathMatch: 'full',
    component: HomeStatsComponent
  },
  {
    path: 'products',
    children: [
      {
        path: '',
        pathMatch: 'full',
        component: ProductsComponent
      }
      {
        path: 'add',
        component: AddProductComponent
      }
    ]
  },
]
}
@NgModule({
  imports: [
    RouterModule.forChild(homeRoutes)
  ],
  exports: [
    RouterModule
  ]
})

export class HomeRoutingModule {}

const routes: Route[] = [
{
    path: "home", component: HomeComponent,  loadChildren: './home/home.module#HomeModule'
  },
  {
    path: '', redirectTo: "login", pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, {useHash: false})],
  exports: [RouterModule]
})

export class AppRoutingModule {
}

---

以及在

home.module.ts

导入

HomeRoutingModule

HomeStatsComponent的内容是什么？你介意也提一下吗？您已将“主”路线设置为它，但它未在项目结构中列出try

http://localhost:4200/home/home

它显示了什么？未捕获（承诺中）：错误：无法匹配任何路由。URL段：“home/home”当我删除第一级路由时，它不是这样工作的。子路由将不起作用。但是你的回答帮助我解决了这个问题。非常感谢。