Angularjs2中根模块导入特性模块，如何将特性模块的路由作为根模块路由的子路由导入？

Question

最近在开发时遇到的问题，根模块在导入子模块时，子模块路由会扩展根模块路由。
但是根模块路由和子模块路由是平级关系。

以下是根模块路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';
import { AuthGuard } from './common/auth/auth.service';

// 根路由器
const manage_routes: Routes = [
    { 
        path: 'manage',
        children: [
            { path: '',  redirectTo: 'dashboard_conf', pathMatch: 'full' },
            ...
        ]
    }
];

@NgModule({
    imports: [ RouterModule.forChild(manage_routes) ],
    exports: [ RouterModule ]
})
export class ManageRoutingModule {}

以下是特性模块路由

import { NgModule } from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

import { ImageUploadComponent } from './upload_image.component';
import { ImageConfComponent } from './image.component';
import { ImageSeriesConfComponent, ImageSeriesConfDetailComponent, ImageSeriesSetComponent } from './image_series.component';
import { ImageTagConfComponent, ImageTagConfDetailComponent, ImageTagSetComponent } from './image_tag.component';
import { ImageSeriesCategoryConfComponent, ImageSeriesCategoryConfDetailComponent, ImageSeriesCategoryConfSetDetailComponent} from './image_series_category.component';
import { ImageRecommendTagConfComponent, ImageRecommendTagConfDetailComponent } from './image_recommend_tag.component';

// 图片模块路由器
const image_routes: Routes = [
    { path: 'manage/image_upload', component: ImageUploadComponent },
    { path: 'manage/image_conf', component: ImageConfComponent },
    
    { 
        path: 'manage/image_series_conf', 
        children: [
            { path: '', component: ImageSeriesConfComponent },
            { path: 'detail/:id', component: ImageSeriesConfDetailComponent },
            { path: 'detail/add', component: ImageSeriesConfDetailComponent },
            { path: 'set/:id', component: ImageSeriesSetComponent },
        ]
    },
    
    ...
];

@NgModule({
    imports: [ RouterModule.forChild(image_routes) ],
    exports: [ RouterModule ]
})
export class ImageRoutingModule {}

根模块导入特性模块

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
...
import { ImageModule } from './image/image.module';

@NgModule({
    declarations: [
        DashboardConfComponent,
    ],
    imports: [
        ...
        ImageModule, // 图片模块
        ManageRoutingModule, // 放在最后
    ],
    providers: [
        ...
    ]
})
export class ManageModule {
}

最后得到的路由列表

Routes:  [
  {
    "path": "manage/image_series_conf",
    "children": [
      {
        "path": ""
      },
      {
        "path": "detail/:id"
      },
      {
        "path": "detail/add"
      },
      {
        "path": "set/:id"
      }
    ]
  },
  {
    "path": "",
    "redirectTo": "manage",
    "pathMatch": "full"
  }
]

这两个路由列表合成之后，依然是平级关系，怎么能让特性模块作为根模块的子路由呢？难道只能把所有路由都写在一块吗？

Answer 1

使用懒加载，无需导入特性模块，如下：
根路由：

const manage_routes: Routes = [
    { 
        path: 'manage',
        children: [
            { path: '',  redirectTo: 'dashboard_conf', pathMatch: 'full' },
            { path:' image',loadChildren:'../../image.module#ImageModule'}
        ]
    }
];