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

利

到Lazy模块的Angular路由导致重定向

1 个答案: