从Angular2中的其他模块延迟加载子项

Question

我遇到了一个问题，其中子路由在应用程序根级别呈现。

我的应用程序采用根应用程序模块构建，该模块可导入SecureModule和PublicModule。然后，SecureModule导入ProviderModule和PracticeModule。每个模块使用.forChild定义它自己的路由（除了定义forRoot的AppModule之外）。出于某种原因，所有默认路径（在每个模块中以“作为路径”列出的路径）都出现在根应用模块级别。

这是一个说明根树的Augury图：

SecureComponent是一个功能组件（没有选择器），它定义了安全区域的布局，并拥有自己的路由器插座。正如您从根树中看到的那样，Practice和Provider模块路径完美地位于其下。但是，Practice和Provider模块也直接来自AppComponent。

我懒得通过loadChildren加载子路径并在默认路径上使用pathMatch full，所以我不确定它们为什么会附加到根组件。

我的安全模块路由定义如下：

export const secureRoutes = [
{
    path: 'secure', component: SecureComponent, children: [
        { path: '', redirectTo: 'firstuse', pathMatch: 'full' },
        { path: 'firstuse', component: FirstUseComponent },
        { path: 'practice', loadChildren: './+practice#PracticeModule' },
        { path: 'provider', loadChildren: './+provider#ProviderModule' }
    ]
},

];

我的练习路线定义为：

export const practiceModuleRoutes = [
{ path: '', redirectTo: 'dashboard', pathMatch: 'full' },
{ path: 'dashboard', component: PracticeDashboardComponent },
{ path: ':id', component: PracticeViewerComponent }
];

我的应用路线定义为：

export const appModuleRoutes: Routes = [
{ path: '', redirectTo: 'public', pathMatch: 'full' },
{ path: 'public', component: PublicComponent },
{ path: 'id_token', redirectTo: 'secure' },
{ path: 'logoff', component: LogoffComponent },
{ path: 'Unauthorized', component: UnauthorizedComponent },
{ path: '**',    component: NoContentComponent },
];

是否有人想过为什么这些练习和提供商默认路线会出现在根应用组件中？

Answer 1

我刚刚意识到我的AppModule正在导入Secure和Public模块。当它这样做时，似乎已经在根级别包含了这些模块的路由。当loadChildren发生时，它还为这些路由加载了正确的路径，这就是它们存在于两个地方的原因。

要解决我的问题，我从AppModule中删除了SecureModule和PublicModule的导入。这为仅作为子项加载路径扫清了道路。