Angular 路由-无法匹配任何路由。URL段

当我尝试加载主组件时，我面临route let的问题

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AddIssueComponent } from './components/add-issue/add-issue.component';
import { EditIssueComponent } from './components/edit-issue/edit-issue.component';
import { IssueListComponent } from './components/issue-list/issue-list.component';
import { ExampleRouteResolver } from './shared/example-route.resolver';
import { SearchareaComponent } from './components/searcharea/searcharea.component';
import { AdvDetailsComponent } from './components/adv-details/adv-details.component';
import { SearchResultComponent } from './components/search-result/search-result.component';
import { AsideSidebarComponent } from './components/aside-sidebar/aside-sidebar.component';
import { UserLoginComponent } from './components/user-login/user-login.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'issues-list' },
  { path: 'searcharea', component: SearchareaComponent},
  { path: 'add-issue', component: AddIssueComponent},
  { path: 'edit-issue/:id', component: EditIssueComponent },
  { path: 'issues-list', component: IssueListComponent/* ,children: [
    {path: 'edit-issue/:id', component: EditIssueComponent},
    {path: 'add-issue', component: AddIssueComponent}
  ],
  resolve: {results: ExampleRouteResolver},
  runGuardsAndResolvers: 'always'*/
} ,
{ path: 'adv-list', component: AdvDetailsComponent },
{ path: 'search-result/:value', component: SearchResultComponent },
{ path: 'login', component: UserLoginComponent },
{ path: 'aside-sidebar', component: AsideSidebarComponent, outlet:'sidebar'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { onSameUrlNavigation: 'reload'})],
  exports: [RouterModule]
})

export class AppRoutingModule { }

app.component.html

    <app-app-header></app-app-header>
<!-- <app-app-header (searchListOutput)="searchListOutput($event)">  </app-app-header>  -->


<div style="display: flex;">

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

</div>

<!-- <div>
  translation: translation pipe 
  <h1>{{ 'demo.title' | translate }}</h1>

  translation: directive (key as attribute)
  <p [translate]="'demo.text'"></p>

  translation: directive (key as content of element)
  <p translate>demo.text</p>
  <button (click)="switchLanguage('en')">en</button>
  <button (click)="switchLanguage('fr')">de</button>
</div> -->


<div>
  <app-app-footer></app-app-footer>

</div>

这里我正在尝试访问

http://localhost:4200/aside-侧栏

我得到以下错误：

     core.js:7187 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'aside-sidebar'
Error: Cannot match any routes. URL Segment: 'aside-sidebar'
    at ApplyRedirects.noMatchError (router.js:3410)
    at CatchSubscriber.selector (router.js:3374)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at TapSubscriber._error (tap.js:56)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)

当我删除outlet

{path:'aside sidebar'，component:AsideSidebarComponent，outlet:'sidebar'}

outlet参数并尝试访问它时，同样的工作正常

该组件在默认路由器出口中加载良好

---

我能知道我在代码中哪里出错吗？

对于路径“侧边栏”，您已经为命名的路由器出口指定了配置，但没有任何默认路由器出口的配置。因此，它会导致错误，无法匹配默认路由器出口的任何路由

---

此外，当您删除outletparam时，边栏组件将加载到主路由器出口，而不是指定的出口

可以用示例演示重现stackblitz上的问题吗？如何在app.component.html中调用路由器侧边栏？表示使用

routerLink

或

router.navigate（）

方法。在html文件中添加此

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-aside-sidebar',
  templateUrl: './aside-sidebar.component.html',
  styleUrls: ['./aside-sidebar.component.css']
})
export class AsideSidebarComponent  {
  constructor() { }
}

     core.js:7187 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'aside-sidebar'
Error: Cannot match any routes. URL Segment: 'aside-sidebar'
    at ApplyRedirects.noMatchError (router.js:3410)
    at CatchSubscriber.selector (router.js:3374)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at TapSubscriber._error (tap.js:56)
    at resolvePromise (zone-evergreen.js:797)
    at resolvePromise (zone-evergreen.js:754)
    at zone-evergreen.js:858
    at ZoneDelegate.invokeTask (zone-evergreen.js:391)
    at Object.onInvokeTask (core.js:30885)
    at ZoneDelegate.invokeTask (zone-evergreen.js:390)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:559)