[英]Angular 4 Lazy Loading and Routes not working
I have a module with the routes of my app. 我有一个模块与我的应用程序的路线。 One of this routes is a lazy loading module.
其中一条路线是延迟加载模块。
The problem is that this lazy loading module haves inside a routes for child components. 问题是这个延迟加载模块内部有子组件的路由。 But on my router config this routes don't appears... So when i call the lazy module don't show anything on my screen.
但是在我的路由器配置上这条路线没有出现......所以当我打电话给懒人模块时,我的屏幕上没有显示任何内容。
Here is my router config (main module): 这是我的路由器配置(主模块):
export const MODULE_ROUTES: Route[] =[
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: HomeComponent, canActivate: [AuthGuard] },
{ path: 'calendar', loadChildren: 'app/dashboard/calendar/calendar-module.module#CalendarModuleModule',canActivate: [AuthGuard]},
{ path: '**', component: NoPageFoundComponent, pathMatch: 'full' }
]
.
.
.
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
.
.
.
On my lazy module: 在我的懒惰模块上:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar', component: CalendarComponent, canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '', component: MainCalendarComponent, canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user', component: EditEventComponent, canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
.
.
.
@NgModule({
imports: [
SharedModule,
.
.
.
RouterModule.forChild(MODULE_CALENDAR_ROUTES)
If i print my router config this routes declaren on my lazy module don't show: 如果我打印我的路由器配置,我的懒惰模块上的路由声明不显示:
Routes: [
{
"path": "dashboard",
"canActivate": [
null
]
},
{
"path": "calendar",
"loadChildren": "app/dashboard/calendar/calendar-module.module#CalendarModuleModule",
"canActivate": [
null
]
},
{
"path": "**",
"pathMatch": "full"
},
{
"path": "dashboard"
}
]
Can you help me? 你能帮助我吗?
The problem was with the way I've declared my route on my lazy module: 问题在于我在懒惰模块上声明我的路线的方式:
export const MODULE_CALENDAR_ROUTES: Route[] = [
{
path: 'calendar',
component: CalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard],
children: [
{
path: '',
component: MainCalendarComponent,
canActivateChild: [AuthGuard, CalendarGuard]
},
{
path: 'user',
component: EditEventComponent,
canActivateChild: [AuthGuard, CalendarGuard]
}
]
}
]
The path
of CalendarComponent
had to change from: CalendarComponent
的path
必须从以下更改:
path: 'calendar', // wrong
component: CalendarComponent,
...
to the below: 到下面:
path: '', // right
component: CalendarComponent,
...
Thanks to @jotatoledo on gitter that help me to solve this. 感谢@jotatoledo on gitter帮助我解决这个问题。
in the main module of routing you have used forChild to load the paths, there isn't any root router to load childrens. 在路由的主模块中,您已经使用forChild加载路径,没有任何根路由器加载子级。
@NgModule({
imports: [
RouterModule.forChild(MODULE_ROUTES)
]})
rather then that you should use 而不是你应该使用
@NgModule({
imports: [
RouterModule.forRoot(MODULE_ROUTES)
]})
Another important thing should be remember about the lazy loading that you should use ** ModuleWithProviders** of core module 另一个重要的事情是应该记住你应该使用的延迟加载** ModuleWithProviders **的核心模块
Lazymodule route Lazymodule路线
import { NgModule, ModuleWithProviders } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [{
path: '',
component: ConsumerComponent,
children: [{
path: '',
component: DashboardComponent
}]
export const ConsumerRoutingModule: ModuleWithProviders = RouterModule.forChild(routes);
main_module main_module
@NgModule({
imports: ['ConsumerRoutingModule']
})
there is an interesting blog about the lazy load : lazyload tutorial 有一个关于延迟加载的有趣博客: lazyload教程
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.