あなたが怠惰な負荷にモジュールをしたい場合は、ここでやったとして、それをインポートしない:
の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
グレート!本当にありがとう! :) – mxii