如何在儿童时期延迟加载路线 route/component

Question

让我们看看我的 plunker：https://plnkr.co/edit/22RIoGsvzfw2y2ZTnazg?p=preview

我想延迟加载一个模块作为子路由。

所以路由 /lazy 应该将 LazyModule 渲染到我的 MainComponent 的 <router-outlet> 中。

然后它将在 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

如何在儿童时期延迟加载路线 route/component

How to lazy load a route as a child route/component

lazy-loading

angular2-routing

angular