角延迟加载路由器配置

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}
];

只需按照与我的仪表板相同的方式设置投资组合即可。