どのように怠惰な負荷の経路子ルート/コンポーネントとして

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) ] 

：

ことによってそれを交換しloadChildrenパスは今srcから始まり

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' 
     } 
    ] 
    } 
]; 

ていることに注意してください。

の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