Конфигурация маршрутизатора с ленивой загрузкой Angular

Я хочу лениво загрузить модуль в приложение angular 2+. Для этого в файле app-routing.module у меня есть следующий код.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AbcdComponent } from './abcd/abcd.component';


const routes: Routes = [
    { path: 'portfolio', loadChildren: './lazy.module#LazyModule'},
    { path: 'dashboard', loadChildren: './lazy.module#LazyModule'},
    { path: 'abcd', component:AbcdComponent}
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  declarations: [
   AbcdComponent

  ]
})
export class AppRoutingModule { }

Теперь в Lazy Module у меня есть следующий код:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { LazyParentComponent } from './lazy-parent/lazy-parent.component';
import { LazyChildComponent } from './lazy-child/lazy-child.component';

import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
    { path: 'load-me', component: DashBoardComponent },
    { path: 'load-you', component: PortfolioComponent }

];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes)
  ],
  declarations: [
    LazyParentComponent,
    LazyChildComponent,

  ]
})
export class LazyModule { }

Этого достаточно, чтобы перенаправить https://example.com/portfolio/load-me на DashBoardComponent и https://example.com/portfolio/load-you в PortfolioComponent.

Но проблема в том, что я хочу иметь ленивый модуль и для такого маршрута https://example.com/portfolio Я хочу указать на PortfolioComponent и https://example.com/dashboard на DashBoardComponent. Оба компонента должны быть загружены лениво. Кроме того, оба компонента находятся в одном модуле. Я искал в Интернете, но не смог найти никакого решения. Любая помощь приветствуется.


javascript angular lazy-loading angular-module angular-router
person jalak vora    schedule 31.01.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это не сработает. Для каждого маршрута внутри AppRoutingModule должен быть свой собственный модуль и маршрутизация. Так, например:

Маршруты панели управления:

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

export const DashboardRoutes: Routes = [
  { path: '', component: DashboardComponent }
];

@NgModule({
  imports: [
    RouterModule.forChild(DashboardRoutes)
  ],
  exports: [RouterModule],
  declarations: [],
  providers: [],
})
export class DashboardRoutingModule { }

Модуль панели инструментов:

@NgModule({
    imports: [DashboardRoutingModule]
})
export class DashboardModule { }

Маршруты приложений:

export const routes: Routes = [
    { path: 'portfolio', loadChildren: './PathTooPortfolio#PortfolioModule'},
    { path: 'dashboard', loadChildren: './PathToDashboard#DashboardModule'},
    { path: 'abcd', component:AbcdComponent}
];

Просто настройте Portfolio так же, как у меня Dashboard.

person RockGuitarist1    schedule 31.01.2018