默认路由重定向不适用于Angular 2中的延迟加载路由 [英] Default route redirect not working for lazy loaded routes in Angular 2
问题描述
我有一个应用程序，该应用程序分为经过身份验证的部分(InternalRootComponent)和匿名部分(ExternalRootComponent).
I have an app that is divided into a authenticated section (InternalRootComponent) and an anonymous section (ExternalRootComponent).
当我显式导航到路由时，一切正常，但是当我访问根(/)时，我不会被重定向.另外，由于某种原因，AccountsComponent已加载.
Everything works fine when I navigate to the routes explicitly, but when I go to the root (/), I don't get redirected. Also, the AccountsComponent is loaded for some reason.
app-routing.module.ts:
app-routing.module.ts:
export const routes: Routes = [
{
path: '',
redirectTo: 'login',
pathMatch: 'full'
},
{
path: 'login',
component: ExternalRootComponent,
children: [
{
path: '',
loadChildren: './login/login.module#LoginModule'
}
]
},
{
path: 'membership',
component: ExternalRootComponent,
children: [
{
path: '',
loadChildren: './membership/membership.module#MembershipModule'
}
]
},
{
path: 'app',
component: InternalRootComponent,
canActivate: [AuthGuard],
children: [
{
path: '',
canActivateChild: [AuthGuard],
children: [
{
path: '',
redirectTo: './dashboard',
pathMatch: 'full'
},
{
path: 'dashboard',
loadChildren: './dashboard/dashboard.module#DashboardModule'
},
{
path: 'accounts',
loadChildren: './accounts/accounts.module#AccountsModule'
},
{
path: 'users',
loadChildren: './users/users.module#UsersModule'
},
{
path: 'services',
loadChildren: './services/services.module#ServicesModule'
},
{
path: 'support',
loadChildren: './support/support.module#SupportModule'
}
]
}
]
},
{
path: '**',
component: NotFoundComponent
}
];
accounts-routing.module.ts:
accounts-routing.module.ts:
const routes: Routes = [
{
path: '',
component: AccountInfoComponent
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class AccountsRoutingModule {}
我不明白的是为什么第一次重定向不起作用-我希望/重定向到/login.取而代之的是，似乎正在调用accounts-routing.module.ts中的空路由.
What I don't understand is why the first redirect doesn't work - I would expect / to redirect to /login. Instead, it seems as if the empty route in accounts-routing.module.ts is being invoked.
推荐答案
我的猜测是AccountModule已导入到根模块中.
My guess is that AccountModule is imported into the root module.
这是应该起作用的通用设置.抱歉，我没有使用您的所有代码，因为我认为使用最少但完整的示例会更清楚.我对可能导致您观察到的行为的潜在问题发表了评论.我不能完全确定这会在没有更多信息的情况下解决您的确切问题，但这至少是相似的，应该会对某人有所帮助.
This is a generic setup that should work. Sorry I did not use all of your code because I thought it would be more clear with a minimum yet complete example. I put comments of potential problems that would lead to the behavior you are observing. I can't be entirely sure this will solve your exact problem without more info but it is at the very least similar and should be helpful to somebody.
采用以下使用模块延迟加载的设置:
take the following setup that uses module lazy loading:
注意-延迟加载可能会导致意外行为，原因是 子路径的路由器模块导入，尤其是如果您将服务捆绑到功能模块中，则需要进行根级别导入(不过最好将服务分成各自的模块).以下评论应解释我的意思.
NOTE - lazy loading can lead to unexpected behavior because of the the router module importing of child routes, especially if you have services bundled into your feature modules which necessitates root level imports (probably best to separate the services into their own modules though). Comments below should explain what I mean by this.
本课程将只导入带有路由的惰性模块一次. (如果不这样做，则意味着该模块将不再是惰性的，并且完全无法实现延迟加载的目的.)如果您将捆绑的服务捆绑在根目录中，则将这些服务分为不同的根目录服务
The lesson is to only import lazy modules with routes once. (Not doing so means the module can no longer be lazy and defeats the purpose of the lazy loading altogether) if you have services bundled in with them that need to be in the root separate those into a different service module for the root
app.module.ts
app.module.ts
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppComponent } from './app.component.ts';
import { routes } from './app-routing.module';
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(routes),
// I think this might be your issue.
// DON'T do this (import child module here)
//
// MaleChildModule
// or somethings like this
// FemaleChildModule.forRoot()
//
// NOTE - order doesn't matter either. i.e. putting this on the
// line above RouterModule.forRoot(routes) will not help
//
// Doing so means the ChildModules and routes are actually being
// imported twice
//
// so these would all be valid paths
// /female/sally
// /sally
// /male/john
// /john
//
// then if you had a module's routes set up like those in
// the MaleChildModule the root redirect to /child
// would not work and it would just be a blank view with no path
// update in the browser. very confusing situation.
],
bootstrap: [AppComponent]
})
export class AppModule {}
app.component.ts
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'ex-app',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {}
app-routing.module.ts
app-routing.module.ts
import { Routes } from '@angular/router';
export const routes: Routes = [
{
path: '',
pathMatch: 'full',
redirectTo: 'males'
},
{
path: 'males',
loadChildren: './male-child.module#MaleChildModule'
},
{
path: 'females',
loadChildren: './female-child.module#FemaleChildModule'
}
]
注意-延迟加载的模块导入RouterModule.forChild(routes)，如果不小心可能会导致意外行为
NOTE - lazy loaded modules import RouterModule.forChild(routes) which can lead to unexpected behavior if not careful
male-child.module.ts
male-child.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { JohnChildComponent } from './john-child.component.ts';
// NOTE - if you set up your child module like this and make the
// mistake I'm describing (importing child modules multiple times)
// you will get unexpected behavior of redirects not working and
// no clues as to why. I suggest always having empty paths redirect
// to something with a component. FemaleChildModule is an example.
const childRoutes: Routes = [
{
path: 'john',
component: JohnChildComponent
}
]
@NgModule({
imports: [
RouterModule.forChild(childRoutes)
],
declarations: [
JohnChildComponent
]
})
export class MaleChildModule {}
female-child.module.ts
female-child.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { SallyChildComponent } from './sally-child.component.ts';
const childRoutes: Routes = [
{
path: '',
children: [
// NOTE - I like to setup lazy loaded modules like this because
// it prevents masking of the module loading issue because there
// are never any paths that don't have an associated component
{
path: '',
pathMatch: 'full',
redirectTo: 'sally',
},
{
path: 'sally',
component: SallyChildComponent
}
]
}
]
@NgModule({
imports: [
RouterModule.forChild(childRoutes)
],
declarations: [
SallyChildComponent
]
})
export class FemailChildModule {}
john-child.component.ts
john-child.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'ex-john',
template: '<p>john</p>'
})
export class JohnChildComponent {}
sally-child.component.ts
sally-child.component.ts
import { Component } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'ex-sally',
template: '<p>sally</p>'
})
export class SallyChildComponent {}
这篇关于默认路由重定向不适用于Angular 2中的延迟加载路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
