带有canLoad或canActivate防护直接URL /的Angular 4延迟加载模块

Question

我尝试在两个不同的模块级别中使用canActivate和canLoad，但是我仍然无法直接访问延迟加载的模块。

在app.routing.module.ts中

   import { AuthGuardImpl } from './lazy-load/auth-guard.service';
import {AuthGuard} from './lazy-load/auth.service';


const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'lazy', canLoad: [AuthGuardImpl], loadChildren: 'app/lazy-load/lazy-load.module#LazyLoadModule'},
  { path: '**', component: PageNotFoundComponent }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule],
  declarations: [],
  providers: [AuthGuardImpl, AuthGuardService]
})

如果您不直接导航到http://url.com/lazy则上面的代码适用。 但是请转到http://url.com/然后通过路由器链接转到惰性模块。

同样，我尝试：

import { AuthGuard } from './auth.service';
import { AuthGuardImpl } from './auth-guard.service';


const lazyRoutes: Routes = [
  { path: '', component: LazyLoadComponent, canActivate: [AuthGuardImpl],
    children: [
    { path: 'dashboard',  loadChildren: 'app/lazy-load/dashboard/dashboard.module#DashboardModule' },
    { path: '', redirectTo: 'dashboard', pathMatch: 'full'},
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(lazyRoutes)],
  exports: [RouterModule],
  declarations: [],
  providers: [AuthGuardImpl, AuthGuard]
})

同样，直接进入http://url.com/lazy无效，但如果应用程序加载后将有效，然后用户通过routerlink导航至/lazy 。

是否可以导航到使用防护的延迟加载模块的直接URL？

Answer 1

我只是在我的应用程序中尝试过，它似乎工作正常。 您是指在开发时运行吗？ 还是部署到生产后？

如果您想看一下并进行比较，可以在这里下载我的示例代码： https : //github.com/DeborahK/Angular-Routing/tree/master/APM-Final

哦...我只是仔细查看了您发布的URL，看起来您是在指生产。 您需要在服务器上实现URL重写，以处理那些“深层链接”。 具体操作方式取决于所使用的服务器类型。