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

Question

我正在创建一个仪表板应用程序，到目前为止，我有两个懒惰加载模块AuthModule和AdminModule我的app-routing-module.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有一个<router-outlet></router-outlet>，应该在其中呈现上述路线。

所以这些网址完美地工作/auth/和/admin/

在我的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]
})

所以qazxsw poi路线直接导航到qazxsw poi，这也很完美。

在我的/admin/我添加了另一个/admin/dashboard/应该在其中呈现admin.component.html路线，所以我可以有sidenav栏布局。

问题是只有<router-outlet></router-outlet>的AdminModule的默认路线在第二个AdminModule内完全呈现，每当我尝试导航到任何其他子路线，如/admin/dashboard或router-outlet，应用程序重定向到/admin/users/

这是我的问题说明。 /admin/booking/ NotFoundComponent

Answer 1

试试这个

Answer 2

定义的方式意味着所有子路径都期望AdminComponent模板中的元素。 Angular将尝试将所有子项呈现为AdminComponent。

我有同样的问题。我没有设法在根路由器插座内渲染延迟加载模块的子路由。我通过以下算法解决了这个问题：

对于每个子组件

{
  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应该在c的出口呈现：

• 为M创建一个延迟加载的模块
• 在root下的app-routing.module中定义一条路由，指向延迟加载模块所需的路径AppComponent
• 从c的路由声明中删除路由

对于c，这看起来像这样：

M

admin/users

这个解决方案有几个缺点：

1. 您无法按预期封装模块，即父子语义丢失
2. 您不能简单地从父路由重用反序列化模块 - 以防您有深度嵌套

所以它不理想，但它的工作原理。

Answer 3

我终于找到了解决方案。

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

app-routing-module.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]
})

）中，将代码更改为如下所示：

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

)

现在您的代码应该按预期工作