Angular 4 Lazy Loading Child Components Not Loaded

Question

I have a medium size Angular App. Which is taking quite a lot of time in loading. Thus I decided to use Lazy Loading. I have a FeedbackModule which is lazy loaded. It looks like this:

Feedback Route:

export const FEEDBACK_ROUTES: Routes = [

{ path : '' , component : FeedbackComponent},
{ path : 'prebilling' , component : PrebillingComponent},
{ path : 'postbilling/login' , component : PostbillingComponentLogin},
{ path : 'postbilling/rating/:mid/:return/:mtid' , component : PostbillingRatingComponent},
{ path : 'prebilling/rating/:mid/:type/:mtid/:mcnt/:mebid' , component : PrebillingRatingComponent},
{ path : 'prebilling/rating' , component : PrebillingRatingComponent},
{ path : 'postbilling/rating/:id' , component : PostbillingRatingComponent},
{ path : 'prebilling/rating/:mid/:type/:mtid' , component : PrebillingRatingComponent},
{ path : 'thanks/:id' , component : ThankYouComponent}
];

Feedback Module:

@NgModule({
declarations: [
    PostbillingComponentLogin,
    PrebillingComponent,
    PrebillingRatingComponent,
    PostbillingRatingComponent,
    ThankYouComponent,
    FeedbackComponent,
    PostbillingForgotPassComponentLogin

],
imports: [
    CommonModule,
    CommonCustomModule,
    FormsModule,
    RouterModule.forChild(FEEDBACK_ROUTES)
],
exports:[ RouterModule]
})

export class FeedbackModule {
}

App.route.ts:

export const ROUTES : Routes = [
...COMMON_ROUTES,
{ path:'feedback', loadChildren: './feedBack/feedback.module#FeedbackModule'}
]

Now when I got for path /feedback Feedback component is loaded. But when I for /feedback/prebilling or any other path it still loads FeedbackComponent. Thanks in advance !

Did you try using the pathMatch: full option ?

Bernard Pagoaga
– Bernard Pagoaga

2019-04-19 09:33:46 +00:00
Commented Apr 19, 2019 at 9:33 — Bernard Pagoaga
– Bernard Pagoaga, Commented Apr 19, 2019 at 9:33

Pawan Jangid · Accepted Answer · 2019-04-19 09:35:27Z

3

Your code seems ok to me but you may try adding pathMatch: full

{ path : '' , component : FeedbackComponent, pathMatch: 'full' }

Let me know if it works for you...

answered Apr 19, 2019 at 9:35

Pawan Jangid

1754 bronze badges

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

1 Comment

Pawan Jangid Over a year ago

Always happy to help :)

The Mechanic · Accepted Answer · 2019-04-19 09:27:22Z

1

This is because you are not targeting other routes as a child route of your lazy loaded module

const ROUTES: Routes = [ { path: '', component: OrgComponent, children: [ { path: 'intro', loadChildren: '../+intro/intro.module#IntroModule' }, { path: 'recent', component: RecentComponent }, ] } ]

answered Apr 19, 2019 at 9:27

The Mechanic

2,3391 gold badge28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Angular 4 Lazy Loading Child Components Not Loaded

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related