从Angular 2中的其他模块延迟加载孩子答案

【问题标题】：Lazyloading children from other modules in Angular2从Angular 2中的其他模块延迟加载孩子
【发布时间】：2017-07-02 23:08:43
【问题描述】：

我遇到了子路由出现在应用根级别的问题。

我的应用由一个根应用模块构成，该模块导入一个 SecureModule 和一个 PublicModule。然后 SecureModule 导入一个 ProviderModule 和 PracticeModule。每个模块用 .forChild 定义它自己的路由（除了定义 forRoot 的 AppModule）。出于某种原因，每个模块中的所有默认路径（以 '' 作为路径列出的路径）都存在于根应用模块级别。

这是一个说明根树的占卜图：

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 },
];

有人知道为什么那些 Practice 和 Provider 默认路由会出现在根应用程序组件中吗？

【问题讨论】：

标签： angular angular2-routing

【解决方案1】：

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

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

【讨论】：