Problem with tabs Ionic 7 and Angular standalone components

Hi I am new to ionic I am trying to learn it but every course on old version 5 or 6 I tried to learn it with Angular standalone but didn't come as I expected the new way of routing didn't work and the ionic doc didn't explain, so I need help with it

app.routes.ts

import { Routes } from '@angular/router';


export const routes: Routes = [
{
path: '',
redirectTo: 'places',
pathMatch: 'full',

},
{
path: 'auth',
loadComponent: () => import('./auth/auth.page').then( m => m.AuthPage)
},
{
path: 'places',
loadChildren)=>import('./places/places.routing').then(m=>m.routesPlaces)
},
{
path: 'discover',
loadComponent: () => import('./places/discover/discover.page').then( m => m.DiscoverPage)
},
{
path: 'offers',
loadComponent: () => import('./places/offers/offers.page').then( m => m.OffersPage)
},
{
path: 'bookings',
loadComponent: () => import('./bookings/bookings.page').then( m => m.BookingsPage)
}
];



Places.routing.ts

import { Routes } from "@angular/router";
import { PlacesPage } from "./places.page";
export const routesPlaces :Routes=[
{
path:'',
loadComponent: () => import('../places/places.page').then( m =>m.PlacesPage),
children :[
{
path: 'tabs',
component: PlacesPage,
children: [
{
path: 'discover',
children: [
{
path: '',
loadChildren: () => import('./discover/discover.page').then(m => m.DiscoverPage)
},
{
path: 'laceId',
loadChildren: () => import('./discover/place-detail/place-detail.page').then(m => m.PlaceDetailPage)
}
]
},
{
path: 'offers',
children: [
{
path: '',
loadChildren: () => import('./offers/offers.page').then(m => m.OffersPage)
},
{
path: 'new',
loadChildren: () => import('./offers/new-offer/new-offer.page').then(m => m.NewOfferPage)
},
{
path: 'edit/laceId',
loadChildren: () => import('./offers/edit/edit.page').then(m => m.EditPage)
},
{
path: 'laceId',
loadChildren: () => import('./offers/offer-bookings/offer-bookings.page').then(m => m.OfferBookingsPage)
}
]
},
{
path: '',
redirectTo: '/places/tabs/discover',
pathMatch: 'full'
}
]
},
{
path: '',
redirectTo: '/places/tabs/discover',
pathMatch: 'full'
}
]
}
]


places.page.html

<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>places</ion-title>
</ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">places</ion-title>
</ion-toolbar>
</ion-header>

<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="discover">
<ion-icon name="search"></ion-icon>
<ion-label>Discover</ion-label>
</ion-tab-button>
<ion-tab-button tab="offers">
<ion-icon name="card"></ion-icon>
<ion-label>Offers</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>

</ion-content>


I tried everything to fix it and now it shows me a blank page

Continue reading...