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

【问题标题】：Angular 4 Lazy Loading Child Components Not LoadedAngular 4延迟加载子组件未加载
【发布时间】：2019-09-09 13:51:23
【问题描述】：

我有一个中等大小的 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。提前致谢！

【问题讨论】：

您是否尝试使用 pathMatch: full 选项？

标签： angular lazy-loading

【解决方案1】：

您的代码对我来说似乎没问题，但您可以尝试添加 pathMatch: full

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

让我知道它是否适合你...

【讨论】：

总是乐于提供帮助:)

【解决方案2】：

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

const ROUTES: 路由 = [ { 路径：''，组件：OrgComponent，孩子们： [ {路径：'intro'，loadChildren：'../+intro/intro.module#IntroModule'}， { 路径：'recent'，组件：RecentComponent }， ] } ]

【讨论】：