文件中的多个路由器出口不适用于延迟加载

Question

我的app-component.html文件如下：

<router-outlet></router-outlet>
<router-outlet name="menu"></router-outlet>

我的应用程序程序如下：

{ path: '', loadChildren: () => import('./features/home/home.module').then(m => m.HomeModule) },
{ path: '', outlet: 'menu', loadChildren: () => import('./features/catalog/catalog.module').then(m => m.CatalogModule)}

但当我启动我的应用程序时，我会出现以下错误：

core.js:4352 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'routes' of undefined
TypeError: Cannot read property 'routes' of undefined
at getChildConfig (router.js:3046)

这似乎是一个已知的错误，它不能工作，所以我尝试了这个：

{
path: '',
outlet: 'menu',
component: MenuProxyRouteComponent,
children: [{
path: 'test',
loadChildren: () => import('./features/catalog/catalog.module').then(m => m.CatalogModule)
},
{ path: '**', redirectTo: 'test', pathMatch: 'full' }
]
},

使用我的MenuProxyRouteComponent:

import { Component } from '@angular/core';
@Component({
selector: 'menu-proxy-route',
template: '<router-outlet></router-outlet>',
})
export class MenuProxyRouteComponent {
}

我没有以前的错误，但现在我有这个：

ERROR in src/renderer/app/features/menu/menu.proxy.component.ts:5:16 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

5     template: '<router-outlet></router-outlet>',

我不明白为什么我会出现这个错误，因为我在app.component.html文件中有一个，它运行良好。

有人知道如何让app.component.html中的multiple处理延迟加载吗？或者为什么我会出现第二个错误？

感谢

Answer 1

我将用一个例子来解释它。对于该多重router-outlet

<router-outlet name="left"></router-outlet>
<router-outlet name="right"></router-outlet>

尝试按以下更改app-routing.module或相关路由文件

{
path: 'list',
component: LeftComponent,
outlet: 'left'
},
{
path: ':id',
component: RightComponent,
outlet: 'right'
}