Как ленивой нагрузки маршрут как дочерний маршрут/компонент

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.module.ts: Вы должны определить свои маршруты (как это необходимо для детей модулей) НО ваших маршруты должны быть пустыми, потому что они будут суффикса их родительские маршруты. (здесь: '/ lazy').

Так что, если вы поставите:

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

Вы ожидаете, чтобы соответствовать /lazy/lazy использовать ленивый компонент, который не то, что вы хотите.

Вместо этого используйте:

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

Вот рабочий Plunkr: https://plnkr.co/edit/KdqKLokuAXcp5qecLslH?p=preview