Angular 命名的路由器插座抛出错误

问：

我正在开发一个单页应用程序，其中可以在单个模板中加载多个响应式表单。有独特的路由连接到这些表单组件。当显示一个表单时，不显示另一个表单是可以的，因为一次只有一个路由可以匹配一个组件。

为简化起见，让我们考虑一下：

1. 两个路由器链路 - “查看”和“编辑”
2. 两个组件 - 和ViewComponentEditComponent
3. 两个路由器插座 - 显示在页面上的相邻位置。viewOutleteditOutlet

当单击“视图”链接时，必须在 viewOutlet 中加载 ViewComponent，当单击“编辑”链接时，必须在 editOutlet 中加载 EditComponent。在这里，当显示 viewComponent 时，editOutlet 为空，反之亦然，这是可以接受的。

我还在这里创建了一个堆栈闪电战——

预览 - https://angular-pbyijh.stackblitz.io/app/main

代码 - https://stackblitz.com/edit/angular-pbyijh

我已经按照文档进行了所有代码更改。但是，我收到错误Cannot match any routes. URL Segment: 'view'

你可能会问我为什么使用路由器插座来显示简单的组件。原因是这个堆栈闪电战只是我真实世界应用程序的最简单复制品。我的应用程序中的组件具有表单。当表单是脏的并且用户试图离开它时，我将显示确认“是否要放弃更改”。据我所知，如果不涉及路线，就无法做到这一点。

代码如下：

app.routing.module.ts

const routes: Routes = [
  {
    path:'',
    component: AppComponent
  }, {
    path:'app',
    loadChildren: './main-app/main-app.module#MainAppModule',
  }
];

main-app.routing.module.ts

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'main'
  }, {
    path: 'main',
    component: MainAppComponent,
    children: [
      {
        path: 'view',
        component: ViewComponent,
        outlet: 'viewOutlet'
      },       {
        path: 'edit',
        component: EditComponent,
        outlet: 'editOutlet'
      }

    ]
  }
];

主应用组件中的路由器出口段 .html

<div class="parent">
  <div class="block">
    <router-outlet name="viewOutlet"></router-outlet>
  </div>

  <div class="block">
    <router-outlet name="editOutlet"></router-outlet>
  </div>
</div>