延迟模块的角度路由导致重定向答案

【问题标题】：Angular Route to Lazy Module Causes Redirect延迟模块的角度路由导致重定向
【发布时间】：2017-06-18 17:36:18
【问题描述】：

我有一个带有简单路由的 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 错误。

谢谢，李

【问题讨论】：

标签： angular redirect routing lazy-loading

【解决方案1】：

因此，除非模块有自己的路由，否则您似乎不能以这种方式延迟加载模块。因此，只需创建一个路由模块并将其与惰性模块相关联，例如：

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 {}

并将其连接到：

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{}

李

【讨论】：