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>应该在其中呈现上述路线。

所以这些 URL 有效 /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]
})

所以/admin/路线直接导航到/admin/dashboard/这也很完美。

在我的 admin.component.html我添加了另一个 <router-outlet></router-outlet>应该呈现 AdminModule它里面的路线，所以我可以有一个 sidenav 栏布局。

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

这是我的问题说明。

Answer 1

我终于想出了解决办法。

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

)

在您的延迟加载模块路由文件 (admin-routing.module.ts) 中，将代码更改为如下所示:

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

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