延迟加载嵌套模块和路由

时间:2017-04-09 10:07:50

标签: angular angular2-routing angular2-modules

我在延迟加载的模块中遇到路由问题。

这是我的" root"路线:

const routes: Routes = [
  {path: '', redirectTo: 'admin', pathMatch: 'full' },
    {path: 'admin', loadChildren: 'app/admin.module#AdminModule'}
];

@NgModule({
  imports: [
      RouterModule.forRoot(routes)
  ],
  exports: [
      RouterModule
  ]
})
export class MainRoutingModule {}

所以我对我的应用程序的期望是将空路径重定向到/admin - 这样可以正常工作,模块已加载。

在AdminModule中我得到了另一个重定向:

const routes: Routes = [
    {path: '', component: AdminComponent, children: [
        {path: '', redirectTo: 'app', pathMatch: 'full' },
        {path: 'app', loadChildren: './app/app.module#AppModule', canActivate: [ AuthGuard ] },
        {path: 'login', component: LoginComponent}
    ]},
];

@NgModule({
    imports: [
        RouterModule.forChild(routes),
        AppModule
    ],
    exports: [
        RouterModule
    ]
})
export class AdminRoutingModule {}

这里有两个场景:

  • 如果用户通过身份验证重定向到app - 那么整条路径将为/admin/app
  • 否则重定向到login - 因此整个路径应为/admin/login

最后在管理应用程序中路由:

const routes: Routes = [
  { path: '', component: AppComponent, children: [
    { path: '',  redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', component: HomeComponent},
  ]}
];

现在问题开始了。如果我将使用URL localhost:3000/admin/app/(*)进入我的身边,一切都按预期工作,调用AuthGuard,url就可以,如果用户未经身份验证,他将重定向到登录页面。

但是!:如果我要输入localhost:3000 app,请将我重定向到localhost:3000/admin/homeapp丢失)并且不会调用AuthGuard。看起来Angular正在省略admin-routing.module并直接转到最后一个。

是什么原因?我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

AdminModule中的

您可以在默认路由中添加canActivate。

const routes: Routes = [
    {path: '', component: AdminComponent, children: [
        {path: '', redirectTo: 'app', pathMatch: 'full'  canActivate: [ AuthGuard ]},
        {path: 'app', loadChildren: './app/app.module#AppModule', canActivate: [ AuthGuard ] },
        {path: 'login', component: LoginComponent}
    ]},
];