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 { }

现在，在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。两个组件都应该延迟加载。同时，两个组件都在同一个模块中。我通过互联网搜索但无法获得任何解决方案。感谢任何帮助。

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 { }

App Routes：

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

只需设置与我有仪表板相同的方式即可。

Angular延迟加载路由器配置

1 个答案: