角延遲加載路由器配置

Question

我想在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 { }

現在，在惰性模塊中，我有以下代碼：

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。 這兩個組件都應該延遲加載。此外，這兩個組件都在同一個模塊中。我在Internet上進行了搜索，但沒有找到任何解決方案。

Answer 1

那行不通。 對於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}
];

只需按照與我的儀表板相同的方式設置投資組合即可。