Angular 加载的模块无法导航到子路由

我正在创建一个仪表板应用程序，到目前为止，我有两个延迟加载的模块

AuthModule

和

AdminModule

我的

应用程序路由模块.ts

如下所示

const routes: Routes = [
    {
     path: '',
     loadChildren: './auth/auth.module#AuthModule'
    },
    {
     path: 'admin',
     loadChildren: './admin/admin.module#AdminModule',
     canActivate: [AuthGuardService]
    },
    {
      path: '**',
      component: NotFoundComponent
    }
];

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

我的

app.component.html

有一个

，应该在其中呈现上述路由

因此，这些URL可以完美地工作

/auth/

和

/admin/

在my

admin routing.module.ts中，我有以下路由

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    children: [
      {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
      {path: 'dashboard', component: DashboardComponent },
      {path: 'users', component: UsersComponent },
      {path: 'reports', component: ReportsComponent },
      {path: 'booking', component: BookingComponent }
    ]
  }
];

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

因此，
/admin/
路线可以直接导航到
/admin/dashboard/
，这也可以很好地工作

在我的
admin.component.html
中，我添加了另一个
，它应该在其中呈现
AdminModule
路由，因此我可以有一个侧导航栏布局

问题是，每当我尝试导航到任何其他子路径，如
/admin/users/
或
/admin/booking/
时，只有
管理员模块
的默认路径（即
/admin/dashboard
在第二个
路由器出口
内完美呈现

这是我的问题说明。
试试这个

{
  path: '',
  component: AdminComponent,
  children: [
    {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
    {
      path: 'dashboard', 
      component: DashboardComponent,
      children: [
        {path: 'users', component: UsersComponent },
        {path: 'reports', component: ReportsComponent },
        {path: 'booking', component: BookingComponent }
      ]
    }
  ]
}

您定义admin routing.module.ts的方式意味着所有子路由都需要AdminComponent模板中的元素。Angular将尝试将所有子级渲染到AdminComponent中

我也有同样的问题。我没有设法在根路由器出口内呈现延迟加载模块的子路由。我通过以下算法解决了这个问题：

对于延迟加载模块
M
的每个子组件
c
，应在
AppComponent
的出口中呈现：


为
c
在根目录下的app-routing.module中定义一条路由，路径指向延迟加载的模块
c
从
M
的路由声明中删除路由

对于
管理员/用户
这可能看起来像这样：

const routes: Routes = [

      {path: '', pathMatch: 'full', redirectTo: 'dashboard'},
      {path: 'dashboard', component: DashboardComponent },
      {path: 'users', component: UsersComponent },
      {path: 'reports', component: ReportsComponent },
      {path: 'booking', component: BookingComponent }

];

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

应用程序路由模块.ts

const routes: Routes = [
    {
     path: '',
     loadChildren: './auth/auth.module#AuthModule'
    },
    {
     path: 'admin',
     loadChildren: './admin/admin.module#AdminModule',
     canActivate: [AuthGuardService]
    },
    {
     path: 'admin/users',
     loadChildren: './admin/users/admin-users.module#AdminUsersModule',
     canActivate: [AuthGuardService]
    },
    {
      path: '**',
      component: NotFoundComponent
    }
];

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

此解决方案有两个缺点：

您无法按预期封装模块，即父子语义丢失
您不能简单地重用来自父路由的反序列化模块-以防您有深度嵌套
所以这并不理想，但它确实有效。
我终于找到了解决方案

在app.module文件中，将代码更改为如下所示：

   const routes: Routes = [
        {
         path: '',
         component: AuthComponent, //<--- Add this
         loadChildren: './auth/auth.module#AuthModule'
        },
        {
         path: 'admin',
         component: AdminComponent, //<--- Add this
         loadChildren: './admin/admin.module#AdminModule',
         canActivate: [AuthGuardService]
        },
        {
          path: '**',
          component: NotFoundComponent
        }
    ];

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

)

现在，您的代码应该可以按预期工作了
这是否打破了“懒散”——通过在根路由器中引用
AdminComponent
，您必须在
AppModule
中导入
AdminModule
，因此将其捆绑到
main.js
？@Charly不需要。管理模块需要导入到应用程序模块中。仅导入管理组件。admin组件是AppModule的一部分。但就是孩子们懒洋洋的。