如何延迟加载作为一个孩子路由的路由/组件

Question

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

我想偷懒加载模块作为一个孩子的路线。

因此，路线/lazy应将LazyModule转换为我的MainComponent的<router-outlet>。

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

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

任何想法？

Answer 1

如果你想偷懒加载模块，不导入它，你在这里所做的：如果你加载模块

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

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

（使用：

的src/app.tsimport）它将被捆绑到主模块中而不是分离的块。

被替换为：

@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.module.ts： 你应该把你的路线确定（因为它是儿童需要的模块）但你的路线应该是空的，因为他们会通过以下后缀他们的父母的路线。 （这里：'/ lazy'）。

所以，如果你把：

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

您希望匹配/lazy/lazy使用你的懒惰组件，这是不是你想要的。

而是使用：

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

这里的工作Plunkr：https://plnkr.co/edit/KdqKLokuAXcp5qecLslH?p=preview