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

2

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

edited Nov 20, 2019 at 17:20

answered Nov 19, 2019 at 22:37

hbamithkumara

2,5541 gold badge21 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jack Over a year ago

But i would like to do in same module as they both share same services and common components

hbamithkumara Over a year ago

In that case try method 2

hbamithkumara Over a year ago

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related