[英]Angular lazy loaded module failed to navigate to child routes
I'm creating a dashboard app and so far I have two lazy loaded modules AuthModule
and AdminModule
My app-routing-module.ts
looks like this 我正在创建一个仪表板应用程序,到目前为止,我有两个延迟加载的模块
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]
})
My app.component.html
has a <router-outlet></router-outlet>
that should render the above routes inside it. 我的
app.component.html
有一个<router-outlet></router-outlet>
,它应该在其中呈现上述路由。
so these urls are working /auth/
and /admin/
perfectly 所以这些网址正在工作
/auth/
和/admin/
perfect
In my admin-routing.module.ts
I have the following routes 在我的
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]
})
so that /admin/
route directly navigates to /admin/dashboard/
which is also working perfectly. 这样
/admin/
route直接导航到/admin/dashboard/
也正常工作。
In my admin.component.html
I added another <router-outlet></router-outlet>
that should renders AdminModule
routes inside it, so I can have a sidenav bar layout. 在我的
admin.component.html
我添加了另一个<router-outlet></router-outlet>
,它应该在其中呈现AdminModule
路由,所以我可以有一个sidenav栏布局。
The problem is that only the default route for AdminModule
which is /admin/dashboard
renders perfectly inside the second router-outlet
whenever I try to navigate to any other child route like /admin/users/
or /admin/booking/
the app redirects to NotFoundComponent
问题是每当我尝试导航到
/admin/users/
或/admin/booking/
app重定向到的任何其他子路由时,只有/admin/dashboard
AdminModule
默认路由完全呈现在第二个router-outlet
内NotFoundComponent
try this 尝试这个
{
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 }
]
}
]
}
The way you define admin-routing.module.ts
means that all child routes expect an element inside the AdminComponent's template. 定义
admin-routing.module.ts
方式意味着所有子路由都期望AdminComponent模板中的元素。 Angular will try to render all children into the AdminComponent. Angular将尝试将所有子项呈现为AdminComponent。
I had the same problem. 我有同样的问题。 I didn't manage to render the child routes of a lazy loaded module inside the root router-outlet.
我没有设法在根路由器插座内渲染延迟加载模块的子路由。 I solved this issue by the following algorithm:
我通过以下算法解决了这个问题:
For each child Component c
of a lazy loaded module M
that should be rendered in the AppComponent
's outlet: 对于应该在
AppComponent
的插座中呈现的延迟加载模块M
每个子组件c
:
c
c
创建一个延迟加载的模块 c
c
所需的路径 M
's routing declaration M
的路由声明中删除路由 For admin/users
this could look something like this: 对于
admin/users
这看起来像这样:
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]
})
This solution has a couple of drawbacks: 这个解决方案有几个缺点:
So it's not ideal, but it works. 所以它不理想,但它的工作原理。
I finally figured out the solution. 我终于找到了解决方案。
In your app.module file change the code to look like this: 在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]
}
)
In your lazy-loaded module routing file ( admin-routing.module.ts
) change the code to look like this: 在延迟加载的模块路由文件(
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]
})
Now your code should work as expected 现在您的代码应该按预期工作
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.