Angular2如何直接进入延迟加载模块？

Question

我有以下结构：

+--AppModule
|  +--OverviewModule
|  |  +--OtherModule1
|  |  +--OtherModule2
|  |  +--OtherModule3

要加载OverviewModule，我使用延迟加载。这是我的AppModule路由配置：

const appRoutes: Routes = [
    {
        path: 'overview',
        loadChildren: 'app/injus/views/overview.module#OverviewModule'
    },
    {
        path: '',
        redirectTo: 'overview',
        pathMatch: 'full'
    },
    {
        path: '**',
        component: PageNotFoundComponent
    }
];

当路径为'overview'时，它会显示我的概览模块。当路径为''时，我希望它转到概述＆＃39;。不幸的是，这不会奏效。

概述路线：

export const overviewRoutes: Routes = [
    {
        path: '',
        component: OverviewComponent,
        children: [
            {
                path: '',
                redirectTo: 'othermodule1',
                pathMatch: 'full'
            },
            {
                path: 'othermodule1',
                loadChildren: 'app/injus/views/othermodule1/othermodule1.module#otherModule1'
            },
            {
                path: 'othermodule2',
                loadChildren: 'app/injus/views/othermodule2/othermodule2.module#2otherModule1'
            },
            {
                path: 'othermodule3',
                loadChildren: 'app/injus/views/othermodule2/othermodule3.module#3otherModule1'
            }
        ]
    }
];

如何指向延迟加载的模块？

Answer 1

请尝试它应该工作：

导出const overviewRoutes：Routes = []

中的主要问题

export const overviewRoutes: Routes = [
     {
        path: '',
        component: OverviewComponent,
    },
    {
        path: '',
        component: OverviewComponent,
        children: [
            {
                path: 'othermodule1',
                loadChildren: 'app/injus/views/othermodule1/othermodule1.module#otherModule1'
            },
            {
                path: 'othermodule2',
                loadChildren: 'app/injus/views/othermodule2/othermodule2.module#2otherModule1'
            },
            {
                path: 'othermodule3',
                loadChildren: 'app/injus/views/othermodule2/othermodule3.module#3otherModule1'
            }
        ]
    }
];

添加

Routes = [ 
     {
        path: '',
        component: OverviewComponent,
      }
    ....
   ]

删除

children: [{
       path: '',
       redirectTo: 'othermodule1',
       pathMatch: 'full'
    },
    ....
   ]

Answer 2

您的配置似乎正确......

我为你创建了一个Plnkr：Plnkr

尝试检查模块的路径和模板中的<router-outlet>位置 （AppComponent模板中需要<router-outlet>，而OverviewComponent中需要另一个<{p}）

Answer 3

所以我找到了问题的原因。我在AppModule中导入了OtherModule，导致为路径''加载了OtherModule。