Angular 4延迟加载子组件未加载

时间:2019-04-19 09:09:19

标签: angular lazy-loading

我有一个中等大小的Angular应用。加载需要花费大量时间。因此,我决定使用延迟加载。我有一个FeedbackModule,它是延迟加载的。看起来像这样:

反馈路线:

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

反馈模块:

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

现在,当我到达路径/feedback时,反馈组件已加载。但是,当我使用/feedback/prebilling或其他任何路径时,它仍会加载FeedbackComponent。预先感谢!

2 个答案:

答案 0 :(得分:2)

您的代码对我来说似乎可以,但是您可以尝试添加pathMatch:完整

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

让我知道它是否对您有用...

答案 1 :(得分:1)

这是因为您没有将其他路由定位为延迟加载模块的子路由

const ROUTES:路线= [   {     路径:“”,组件:OrgComponent,     儿童:[ {path:'intro',loadChildren:'../+intro/intro.module#IntroModule'}, {path:“ recent”,component:RecentComponent},     ]   } ]

enter image description here