到懒惰模块的角度路由导致重定向

Question

我有一个简单路由的Angular2应用程序。路线如下：

const routes: Routes = [ 
    { path: 'detail', outlet: 'primary', component: DetailComponent }, 
    { path: 'user', outlet: 'primary', loadChildren: 'app/auth/auth.module#AuthModule' }, 
    { path: '', redirectTo: '/user/login', pathMatch: 'full' } 
]; 

现在，这个工程很好，但我想懒加载详细模块。如果我将详细模块设置为延迟加载，但是，我得到一个重定向到/user/login。要延迟加载，我简单地做：当上述运行

const routes: Routes = [ 
    { path: 'detail', outlet: 'primary', loadChildren: 'app/detail/detail.module#DetailModule' }, 
    { path: 'user', outlet: 'primary', loadChildren: 'app/auth/auth.module#AuthModule' }, 
    { path: '', redirectTo: '/user/login', pathMatch: 'full' } 
]; 

路由追踪给出了这样的输出：

Router Event: t 
NavigationStart(id: 1, url: '/detail') 
t {id: 1, url: "/detail"} 
App detail 
Router Event: t 
RoutesRecognized(id: 1, url: '/detail', urlAfterRedirects: '/user/login', state: Route(url:'', path:'') { Route(url:'user', path:'user') { Route(url:'', path:'') { Route(url:'login', path:'login') } } }) 
t {id: 1, url: "/detail", urlAfterRedirects: "/user/login", state: e} 
Router Event: t 
NavigationCancel(id: 1, url: '/detail') 
t {id: 1, url: "/detail", reason: ""} 
Router Event: t 
NavigationStart(id: 2, url: '/detail') 
t {id: 2, url: "/detail"} 
Router Event: t 
RoutesRecognized(id: 2, url: '/detail', urlAfterRedirects: '/user/login', state: Route(url:'', path:'') { Route(url:'user', path:'user') { Route(url:'', path:'') { Route(url:'login', path:'login') } } }) 
t {id: 2, url: "/detail", urlAfterRedirects: "/user/login", state: e} 
Router Event: t 
NavigationEnd(id: 2, url: '/detail', urlAfterRedirects: '/user/login') 
t {id: 2, url: "/detail", urlAfterRedirects: "/user/login"} 

最终，这导致EXCEPTION: Uncaught (in promise): RangeError: Maximum call stack size exceeded错误。

感谢， 李

Answer 1

因此，看来，你不能延迟加载的模块以这种方式，除非它有它自己的路由。所以，简单地创建一个路由模块，并将其与懒惰的模块，如关联：

import { NgModule } from '@angular/core'; 
import { CommonModule } from '@angular/common'; 
import { FormsModule } from '@angular/forms'; 
import { DetailRoutingModule } from './detail-routing.module'; 
import { DetailComponent } from './detail.component'; 

@NgModule({ 
    imports: [FormsModule, CommonModule, DetailRoutingModule], 
    declarations: [DetailComponent], 
    exports: [DetailComponent, CommonModule] 
}) 
export class DetailModule{} 

李

：

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { DetailComponent } from './detail.component'; 

const routes: Routes = [ 
    { path: '', component: DetailComponent} 
]; 

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

并与挂钩起来