Angular lazy loading router configuration

Question

I want to lazy load a module in the angular 2+ application.For that in ' app-routing.module ' file I have following code.

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

Now, in Lazy Module I have the following code:

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

This is good enough to route https://example.com/portfolio/load-me to DashBoardComponent and https://example.com/portfolio/load-you to PortfolioComponent.

But the issue is I want to have a lazy module and for route like this https://example.com/portfolio I want to point to PortfolioComponent and https://example.com/dashboard to DashBoardComponent. Both components should be lazily loaded .Also, both components are in same module.I searched through internet but could not get any solution.Any help is appreciated.

Answer 1

That won't work. For each route inside of the AppRoutingModule, there needs to be its own module & and routing. So for example:

Dashboard Routes:

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

Dashboard Module:

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

Just setup Portfolio the same way as I have Dashboard.