Angular 6 Lazy Loaded组件无法渲染

时间:2018-06-09 21:31:09

标签: angular angular-routing angular-router

我遇到了实施延迟加载的问题,这让我感到非常沮丧。我现在懒得加载两个模块,如下面的app-routing.module.ts中所示:

{
  path: 'home',
  loadChildren: './general/general.module#GeneralModule'
},
{
  path: 'admin',
  canLoad: [AdminGuard],
  loadChildren: './admin/admin.module#AdminModule'
},
{
  path: '',
  redirectTo: '/home',
  pathMatch: 'full'
},
{
  path: '**',
  component: PageNotFoundComponent
}

通用模块加载正常,我可以导航到该模块中的所有组件。这是路由设置:

{
  path: 'login',
  component: LoginComponent,
  canActivate: [CanActivateLogin]
},
{
  path: 'manage-account',
  component: ManageAccountComponent,
  canActivate: [CanActivateLogin]
},
{
  path: 'register',
  component: RegisterComponent,
  canActivate: [CanActivateLogin]
},
{
  path: '',
  component: HomepageComponent
}

当试图访问管理模块时,我正确地命中了我的CanLoad后卫并且它返回了一个真正的值:

@Injectable()
export class AdminGuard implements CanLoad {
constructor(
  private store: Store<AppState>
) { }

canLoad(route: Route): boolean | Observable<boolean> | Promise<boolean> {
return this.store.select(userSelectors.getUserAccessLevel).pipe(
  map(access => access === ROLE_SYSTEM_ADMIN)
  );
}
}

我认为它与我的管理路由器设置有关,但截至目前它非常简单且仍无法正常工作:

{
  path: 'manage-users',
  component: ManageUsersComponent
},
{
  path: '',
  component: LandingPageComponent
}

任何帮助都将受到极大的赞赏

0 个答案:

没有答案