如何将路由作为子路由/组件延迟加载

Question

我们来看看我的plunker:https://plnkr.co/edit/22RIoGsvzfw2y2ZTnazg ？ p = preview

我想懒惰加载一个模块作为子路由.

因此,路线/lazy应该 LazyModule成为<router-outlet>我的MainComponent.

然后它将在它DummyComponent和延迟加载的模块之间切换.

相反,现在延迟加载的模块将被渲染到AppComponent..

有任何想法吗？

Answer 1

如果你想延迟加载一个模块,不要像你在这里那样导入它:

src/app.ts:

import { LazyModule } from './lazy/lazy.module';
...

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(routes), LazyModule ]

如果加载模块(使用import),它将被捆绑到主模块中,而不是具有分离的块.

替换为:

@NgModule({
  imports: [ BrowserModule, RouterModule.forRoot(routes) ]

然后你的路线应该是这样的:

const routes = [
  {
    path: '',
    component: MainComponent,
    children: [
      {
        path: '',
        component: DummyComponent
      },
      // should be rendered as a CHILD of my MainComponent .. !!
      {
        path: 'lazy',
        loadChildren: 'src/lazy/lazy.module#LazyModule'
      }
    ]
  }
];

请注意,loadChildren路径从src现在开始.

对于src/lazy/lazy.module.ts:您应该定义您的路由(因为它是子模块所需的)但是您的路由应该为空,因为它们将以其父路由为后缀.(这里:'/ lazy').

所以,如果你把:

const routes = [
  {
    path: 'lazy',
    component: LazyComponent
  }
];

您希望匹配/lazy/lazy使用您的惰性组件,这不是您想要的.

而是使用:

const routes = [
  {
    path: '',
    component: LazyComponent
  }
]

这是工作的Plunkr:https://plnkr.co/edit/KdqKLokuAXcp5qecLslH ？ p = preview