Incompatible reuse strategy Ionic/Angular

Question

in the pwa we are developing we have a tab bar where you can navigate with replaceUrl so that pressing the hardware back button will exit the app:

tabs.page.html:

<ion-tabs >
  <ion-tab-bar slot="bottom">
    <ion-tab-button (click)="goTo('home')"">
      <ion-icon name="home"></ion-icon>
      <ion-label>{{'TABS.home' | translate}}</ion-label>
    </ion-tab-button>

    <ion-tab-button (click)="goTo('shopping')">
      <ion-icon name="card"></ion-icon>
      <ion-label>{{'TABS.shop' | translate}}</ion-label>
    </ion-tab-button>
    <ion-tab-button (click)="goTo('profile')">
      <ion-icon name="person"></ion-icon>
      <ion-label>{{'TABS.me' | translate}}</ion-label>
    </ion-tab-button>
  </ion-tab-bar>
</ion-tabs>

tabs.page.component:

goTo(place: string){
    this.router.navigate(['tabs/'+place],{replaceUrl: true});
  }

However, we would like the 3 components not to be destroyed each time. We have thus defined our own CustomRouteReuseStrategy in which if the route is that of the 3 tabs the associated component is saved:

custom.strategy.ts:

import { ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy,} from '@angular/router';

export class CustomRouteReuseStrategy implements RouteReuseStrategy {
  private routeStore = new Map<string, DetachedRouteHandle>();

  shouldDetach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig!.path!;
    return path!=null && ['', 'home', 'shopping', 'profile'].includes(path);
  }
  store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
    this.routeStore.set(route.routeConfig!.path!, handle);
  }
  shouldAttach(route: ActivatedRouteSnapshot): boolean {
    const path = route.routeConfig!.path!;
    return (
      !!path && ['', 'home', 'shopping', 'profile'].includes(path) && !!this.routeStore.get(path)
    );
  }
  retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null{
    const path = route.routeConfig!.path!;
    const result = this.routeStore.get(path);
    if(result == undefined){
        return null;
    }else{
        return result;
    }
    
  }
  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return future.routeConfig === curr.routeConfig;
  }
}

but trying to click from one tab to the other the following error comes up:

Error: Uncaught (in promise): Error: incompatible reuse strategy

These are app.routing.module and tabs.routing.module:

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },

  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
]


const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'home',
        loadChildren: () =>
          import('../home/home.module').then((m) => m.HomePageModule),
        ...canActivate(redirectUnauthorizedToLogin),
      },
      {
        path: 'shopping',
        loadChildren: () =>
          import('../shopping/shopping.module').then((m) => m.ShoppingPageModule),
        ...canActivate(redirectUnauthorizedToLogin),
      },
      {
        path: 'profile',
        loadChildren: () =>
          import('../profile/profile.module').then((m) => m.ProfilePageModule),
        ...canActivate(redirectUnauthorizedToLogin),
      },
      ....... (all subpaths here)
      {
        path: '',
        redirectTo: '/tabs/home',
        pathMatch: 'full',
      },
    ],
  },
  {
    path: '',
    redirectTo: '/tabs/home',
    pathMatch: 'full',
  },
  {
    path: 'not-found',
    loadChildren: () =>
      import('../page-not-found/page-not-found.module').then(
        (m) => m.PageNotFoundPageModule
      ),
  },
  { path: '**', redirectTo: '/not-found', pathMatch: 'full' },
];