Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs/groups'

I am trying to put all my tabs under auth guard and users can see those tabs after they logged in, but I am getting this error

Uncaught (in promise): Error: Cannot match any routes. URL Segment: ‘tabs/groups’

Therefore I get blank screen.

code

Login.page.ts

login() {

    const user = this.user.value;

    this.authService.login(user.phone, user.password).subscribe(

      (data: any) => {

        this.alertService.presentToast(data.message);

      },

      error => {

        this.alertService.presentToast(error.statusText);

      },

      () => {

        this.router.navigate(['tabs']);

        this.menu.enable(true);

      }

    );

  }

app.component.ts

public appPages = [
    {
      title: 'Dasbor',
      url: '/tabs/groups',
      icon: 'compass'
    }
  ];

async ngOnInit() {
    const path = window.location.pathname.split('tabs/')[1];
    if (path !== undefined) {
      this.selectedIndex = this.appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
    }
}

tabs-routing-module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { TabsPage } from './tabs.page';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'groups',
        loadChildren: () => import('../tab1/tab1.module').then(m => m.Tab1PageModule)
      },
      {
        path: 'phones',
        loadChildren: () => import('../tab2/tab2.module').then(m => m.Tab2PageModule)
      },
      {
        path: 'tab3',
        loadChildren: () => import('../tab3/tab3.module').then(m => m.Tab3PageModule)
      },
      {
        path: 'profile',
        loadChildren: () => import('../Pages/Auth/profile/profile.module').then( m => m.ProfilePageModule)
      },
      {
        path: '',
        redirectTo: '/tabs/groups',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/groups',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

any idea what might cause the error?

Solved

I have to change tabs routing to

{
        path: '',
        redirectTo: 'groups',
        pathMatch: 'full'
      }
    ]
  },
  {
    path: '',
    redirectTo: 'tabs',
    pathMatch: 'full'
  }

thanks to this issue on github.