Как подключиться к ленивому модулю?

Question

С новым маршрутизатором действительно нет необходимости использовать вспомогательные маршруты, и если вы ленивы загружаете модуль с собственными маршрутами и маршрутизатором, то маловероятно, что вы даже получите это для работы на основе существующих примеров (я попробовал целый день, используя каждый пример в stackoverflow, безрезультатно). Итак, как выглядит рабочий пример этого?

Answer 1

Использование углового 2.3.1 (угловой-cli) с маршрутизатором 3.3.1, это рабочее решение, с которым я столкнулся.

верхнего уровня маршрутизатора, приложение-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
const routes: Routes = [ 
    { path: '', redirectTo: '/login', pathMatch: 'full', canActivate: [AuthGuard] }, 
    { path: 'login', component: AuthComponent }, 
    { path: 'analyze', loadChildren: 'app/analyze/analyze.module#AnalyzeModule', canActivate: [AuthGuard] } 
]; 
@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

Ленивый загружен модуль (AnalyzeModule) маршрутизатор, чьи соответствующие компоненты был выход в исходный маршрутизатор-выход в приложение-компонент:

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
const routes: Routes = [ 
    { path: '', component: AnalyzeComponent, 
     children: [ 
     { path: 'charts', component: ChartsComponent }, 
     { path: 'graphs', component: GraphsComponent }, 
     ] 
    } 
]; 
@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule], 
}) 
export class AnalyzeRoutingModule { } 

ленивый загружен компонент HTML:

<li><a href="#" [routerLink]="['charts']" routerLinkActive="active">Charts</a></li> 
<li><a href="#" [routerLink]="['graphs']" routerLinkActive="active">Graphs</a></li> 
<router-outlet></router-outlet> 

Обратите внимание, что поскольку вы ленивы Лоа ding модуль, что новый путь по умолчанию пуст так же, как и в маршрутизаторе над ним. Ключевым здесь является перечисление маршрутов в качестве детских маршрутов и НЕ использование вспомогательного маршрутизатора-выхода (он будет работать независимо от того, что вы делаете с этой конкретной настройкой). Это означает, что вы можете просто использовать обычную розетку маршрутизатора с обычными routerLinks (без вспомогательных выходов со всем беспорядком, который поставляется вместе с ним), не перезаписывая ленивый компонент, загруженный в исходный маршрутизатор-выход в app-component.html (или что-то еще на следующем уровне), что и происходит, если вы не используете вспомогательную розетку и не перечислите подпрограммы как дети одновременно.

Это не новое решение, а более разнообразное решение для этой конкретной установки. Надеюсь, это сэкономит кому-то время и разочарование.