Angular 离子选项卡：无法匹配任何路由，但是否有效？

在我正在开发的Ionic应用程序中，我使用标签在不同页面之间导航

即使他们真的工作。每个导航返回“无法匹配任何路线”，但实际导航。我想不出发生了什么事

我的app-routing.module

{
  path: 'ranking',
  loadChildren: () => import('./pages/ranking/ranking.module').then( m => m.RankingPageModule)
},

我的排名路由模块

const routes: Routes = [
  {
    path: '',
    component: RankingPage,
    children: [
      {
        path: 'world-ranking',
        loadChildren: () =>
          import('./world-ranking/world-ranking.module').then(m => m.WorldRankingPageModule)
      },
      {
        path: 'country-ranking',
        loadChildren: () =>
          import('./country-ranking/country-ranking.module').then(m => m.CountryRankingPageModule)
      },
      {
        path: '',
        redirectTo: '/ranking/world-ranking',
        pathMatch: 'full'
      }
    ]
  },
];

当直接导航到URL时，它实际上可以工作，单击选项卡可以工作，但后者会提供错误

Ranking.page.html如下所示

<ion-content>
<ion-tabs>
  <ion-tab-bar slot="top">
    <ion-tab-button tab="world-ranking">
      World
    </ion-tab-button>
    <ion-tab-button tab="country-ranking">
      Country
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>
</ion-content>

世界
国家