Angular 2 как определить ленивые загруженные дочерние маршруты родительского маршрута, которые также ленивы загружены

Question

Я пытаюсь получить ленивую загрузку для работы для своего приложения, но это одна проблема за другой. Я получил основной маршрут к ленивой нагрузке, которая равна /admin, теперь я хочу добавить еще один маршрут, который равен /admin/login.

Так что я сделал это:

админа router.module.ts

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    RouterModule.forChild([ 
     { 
     path: '', 
     component: AdminAreaComponent, 
     children: [ 
      { 
      path: 'login', 
      loadChildren: 'app/+admin-area/pages/login/login.module#LoginModule' 
      } 
     ] 
     } 
    ]) 
    ], 
    exports: [ 
    RouterModule 
    ], 
    declarations: [ 
    AdminAreaComponent 
    ] 
}) 
export class AdminAreaRouterModule {} 

логин-router.module.ts

import {NgModule} from '@angular/core'; 
import {RouterModule, Routes} from '@angular/router'; 

// Global modules 
import {ComponentsModule, SharedModule} from '../../shared'; 

// Components 
import {LoginComponent} from '../login.component'; 

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    RouterModule.forChild([ 
     { 
     path: '', 
     component: LoginComponent 
     } 
    ]) 
    ], 
    exports: [ 
    RouterModule 
    ], 
    declarations: [ 
    LoginComponent 
    ] 
}) 
export class LoginRouterModule {} 

login.module. ts

import {NgModule} from '@angular/core'; 

import {ComponentsModule, SharedModule} from '../../../shared'; 
import {LoginComponent} from './login.component'; 
import {LoginRouterModule} from './router'; 

@NgModule({ 
    imports: [ 
    ComponentsModule, 
    SharedModule, 
    LoginRouterModule 
    ], 
    exports: [ 
    ComponentsModule, 
    SharedModule, 
    LoginRouterModule 
    ] 
}) 

export class LoginModule {} 

Проблема в том, что после того, как я добавлю часть children, /admin перестает работать вместе, выбросив ошибку Cannot match any routes. URL Segment: 'admin'.

Разве это не так, как вы определяете дочерние маршруты ленивого загруженного маршрута? Как я могу это исправить?

Answer 1

Глядя на моем репо из моего предыдущего ответа вам: https://stackoverflow.com/a/40121008/146656

В моем примере это lazy/deep, который соответствует admin/login для вас.

Во-первых, я побежал ng g module lazy/Deep --routing

Затем, внутри src/app/lazy/deep/deep-routing.module.ts, я изменил routes к:

 
export const routes: Routes = [ 
    { 
    path: '', 
    component: DeepComponent 
    } 
]; 

Затем я добавил <router-outlet> к представлению основного компонента в /lazy, так что содержание от /lazy/deep может быть оказано внутри него.

Важный кусок, как я изменил маршрут для lazy-routing.module.ts, чтобы для отложенной загрузки lazy/deep маршрута:

 
export const routes: Routes = [ 
    { 
    path: '', 
    component: LazyComponent 
    }, 
    { 
    path: 'deep', 
    // Loading by relative path didn't seem to work here 
    // loadChildren: './deep/deep.module#DeepModule' 
    loadChildren: 'app/lazy/deep/deep.module#DeepModule' 
    } 
]; 

Если вы работаете ng watch/npm start или ng build --watch, вам необходимо перезапустить, что чтобы заставить его работать.

Смотрите полный пример в deep-lazy-loading отрасли в https://github.com/Meligy/routing-angular-cli/tree/deep-lazy-loading

Answer 2

Вам необходимо определить пустой маршрут в вашем LoginModule.

login.module.ts

@NgModule({ 
    imports: [ 
    RouterModule.forChild({ path: '', component: LoginComponent }) 
    ComponentsModule, 
    SharedModule 
    ], 
    exports: [ 
    ComponentsModule, 
    SharedModule 
    ], 
    declarations: [ 
    LoginComponent 
    ] 
}) 

export class LoginModule {}