角度延迟加载路由器配置答案

【问题标题】：Angular lazy loading router configuration角度延迟加载路由器配置
【发布时间】：2018-01-31 12:36:25
【问题描述】：

我想在 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。两个组件都应该延迟加载。另外，两个组件都在同一个模块中。我通过互联网搜索但找不到任何解决方案。感谢任何帮助。

【问题讨论】：

标签： javascript angular lazy-loading angular-router angular-module

【解决方案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}
];

只需像设置仪表板一样设置投资组合。

【讨论】：