Question

我的app.routing.ts有以下路由设置，其中包含我的大多数组件的延迟加载工具。我的应用程序包含两个主要部分，“访问者可以访问部分”和“登录用户可以访问部分”。未登录时，用户将被AuthGuard阻止，帐户和管理员等任何路线都将被阻止并重新进入家中

// app.routing.ts
const APP_ROUTE: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full', },
{ path: '', component: UserLayoutComponent, children: [
    { path: 'account', loadChildren: 'app/account/account.module#AccountModule' },
    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' },
    ]
},
{ path: '', component: VisitorLayoutComponent, children: [
    { path: 'home', component: HomePageComponent },
    { path: 'login', loadChildren: 'app/login/login.module#LoginModule' },
    { path: 'privacy-policy', loadChildren: 'app/privacy-policy/privacy-policy.module#PrivacyPolicyModule' },
    { path: 'terms-and-condition', loadChildren: 'app/terms-and-condition/terms-and-condition.module#TermsAndConditionModule' },
    ]
}, 
{ path: '**', redirectTo: '/home'}
];


// account.routing.ts with guards
const ACOUNT_ROUTES: Routes = [
    { path: '', component: AccountComponent, canActivate: [AuthGuard] },
    { path: 'edit-defaults', component: AccountEditDefaultsComponent, canActivate: [AuthGuard] },
    { path: 'change-password', component: AccountChangePasswordComponent, canActivate: [AuthGuard] },
];

// admin.routing.ts with guards
const ADMIN_ROUTES: Routes = [
    { path: '', component: AdminComponent, canActivate: [AuthGuard, AdminGuard] },
    { path: 'users', component: AdminUsersComponent, canActivate: [AuthGuard, AdminGuard] },
];

延迟加载在此阶段工作正常，因为除非用户登录，否则将加载需要日志记录的组件。但是，我希望通过延迟加载UserLayoutComponent进一步改进这一点，除非用户已登录，因为预先在该组件内加载任何内容是没有意义的。目前它是导入的，所以它不是延迟加载的

我试图创建一个user-layout.module.ts和user-layout.routing.ts并将我的app.routing.ts更改为

// app.routing.ts
const APP_ROUTE: Routes = [
{ path: '', redirectTo: 'home', pathMatch: 'full', },
{ path: '', loadChildren: 'app/layout/user-layout/user-layout.module#UserLayoutModule', children: [
    { path: 'account', loadChildren: 'app/account/account.module#AccountModule' },
    { path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule' },
    ]
},
{ path: '', component: VisitorLayoutComponent, children: [
    { path: 'home', component: HomePageComponent },
    { path: 'login', loadChildren: 'app/login/login.module#LoginModule' },
    { path: 'privacy-policy', loadChildren: 'app/privacy-policy/privacy-policy.module#PrivacyPolicyModule' },
    { path: 'terms-and-condition', loadChildren: 'app/terms-and-condition/terms-and-condition.module#TermsAndConditionModule' },
    ]
}, 
{ path: '**', redirectTo: '/home'}
];

我收到此错误，表明这是错误的做法。

children和loadChildren不能一起使用

如何为UserLautComponent.ts实现延迟加载

请注意，我的UserLayoutComponent包含导航栏，侧边菜单和一些初始加载，以便在登录后获取用户信息

嵌套路由的Angular Routes Lazy Loading

0 个答案: