Angular lazy loading routing

Question

I have lazy load app routing like below:

app.routing.ts

{
  path: 'reports',
  loadChildren: () => import('../Reporting/reporting.module').then(m => m.ReportingModule)
},
{
  path: 'report-builder',
  loadChildren: () => import('../Reporting/reporting.module').then(m => m.ReportingModule)
},

My lazy load module routes look like this

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportsComponent },
        { path: ':id',component: ViewReport},
        { path: '**', component: ViewReport }
      ]
    },
    {
      path: '',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }

I am trying to achieve, when user clicks on reports route, navigate to default Reportscomponent and when clicked on reportBuilder route, navigate to ReportBuilderComponent.

How to achieve this.

Simplest way to do this is create another routing module for report-builder path. — hbamithkumara
– hbamithkumara, Commented Nov 19, 2019 at 22:11

hbamithkumara · Accepted Answer · 2019-11-20 17:20:17Z

Method 1

Create two modules one for reports and one for report-builder.

app.report-routing.ts

const routes: Routes = [
    {
       path: '',
       children: [
           { path: '', component: ReportsComponent },
           { path: ':id',component: ViewReport},
           { path: '**', component: ViewReport }]
    }
]

Configure above routes in report.module

app.report-builder-routing.ts

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }
]

configure above routes in report-builder.module

app.routing.js

{
  path: 'reports',
  loadChildren: () => import('../Reporting/report.module').then(m => m.ReportingModule)
},
{
  path: 'report-builder',
  loadChildren: () => import('../Reporting/report-builder.module').then(m => m.ReportBuilderModule)
}

Method 2

app.report-routing.ts

const routes: Routes = [
    {
      path: '',
      children: [
        { path: '', component: ReportsComponent },
        { path: ':id',component: ViewReport},
        { path: '**', component: ViewReport }
      ]
    },
    {
      path: 'builder',
      children: [
        { path: '', component: ReportBuilderComponent },
        { path: 'edit/:id', component: DesignReport },
        { path: '**', component: DesignReport }
      ]
    }

app.routing.ts

{
  path: 'report',
  loadChildren: () => import('../Reporting/reporting.module').then(m => m.ReportingModule)
}

I hope this works for you.

Reference Angular: Lazy loading feature modules

But i would like to do in same module as they both share same services and common components
With method 1 you can have /report and /report-builder url endpoints and with method 2 you can have /report and /report/builder endpoints

Collectives™ on Stack Overflow

Angular lazy loading routing

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related