如何让惰性模块访问Angular中的命名出口？

问题：我有一个懒惰的模块想在app.component.html中使用弹出式路由器。

我的应用程序组件模板中包含以下内容：

src/app/app.component.html

我的应用程序模块及其路径： /src/app/app-routing.module.ts

const appRoutes: Routes = [
  { path: 'lazy',  loadChildren: 'app/lazy/lazy.module#LazyModule' }, // <--------
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes),
  ],
  exports: [
    RouterModule
  ],
})
export class AppRoutingModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

const lazyRoutes: Routes = [
  { path: 'lazy-popup', outlet: 'app-popup', component: LazyPopupComponent },
  { path: '', component: LazyComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(lazyRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class LazyRoutingModule {}

@NgModule({
  imports: [
    CommonModule,
    AppSharedModule,
    LazyRoutingModule
  ],
  declarations: [
    LazyComponent,
    LazyPopupComponent
  ],
  exports: [
    LazyPopupComponent,
    LazyRoutingModule,
  ]
})
export class LazyModule {}

我的惰性模块及其路由： /src/app/lazy/lazy.module.ts

const appRoutes: Routes = [
  { path: 'lazy',  loadChildren: 'app/lazy/lazy.module#LazyModule' }, // <--------
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes),
  ],
  exports: [
    RouterModule
  ],
})
export class AppRoutingModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

const lazyRoutes: Routes = [
  { path: 'lazy-popup', outlet: 'app-popup', component: LazyPopupComponent },
  { path: '', component: LazyComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(lazyRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class LazyRoutingModule {}

@NgModule({
  imports: [
    CommonModule,
    AppSharedModule,
    LazyRoutingModule
  ],
  declarations: [
    LazyComponent,
    LazyPopupComponent
  ],
  exports: [
    LazyPopupComponent,
    LazyRoutingModule,
  ]
})
export class LazyModule {}

/src/app/lazy/lazy.module.ts

const appRoutes: Routes = [
  { path: 'lazy',  loadChildren: 'app/lazy/lazy.module#LazyModule' }, // <--------
];
@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(appRoutes),
  ],
  exports: [
    RouterModule
  ],
})
export class AppRoutingModule { }

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

const lazyRoutes: Routes = [
  { path: 'lazy-popup', outlet: 'app-popup', component: LazyPopupComponent },
  { path: '', component: LazyComponent }
];
@NgModule({
  imports: [
    RouterModule.forChild(lazyRoutes)
  ],
  exports: [
      RouterModule
  ]
})
export class LazyRoutingModule {}

@NgModule({
  imports: [
    CommonModule,
    AppSharedModule,
    LazyRoutingModule
  ],
  declarations: [
    LazyComponent,
    LazyPopupComponent
  ],
  exports: [
    LazyPopupComponent,
    LazyRoutingModule,
  ]
})
export class LazyModule {}

---

我似乎无法让它工作，因为我遇到了以下错误：

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot match 
any routes. URL Segment: 'lazy-popup'.

请注意，如果我在下面的AppModule中导入LazyModule，这将非常有效：

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    LazyModule // <-- This routes works now.. But.. this should be lazy.. : (
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

@NgModule({
声明：[AppComponent]，
进口：[
浏览器模块，
批准模块，
LazyModule//我认为这是不可能的，yethow，你是如何导航到这条会引起错误的路线的？@PavelAgarkov，如下所示：