proplem with tabs ionic 7 and anguler standalone components

Issue

hi I am new to ionic I try to learn it but evrey course on old version 5 or 6 I try to learn it with anguler standalone but didnt come as I expected the new way of routing didnt work and ionic doc didnt explean, 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: ':placeId',
                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/:placeId',
                loadChildren: () => import('./offers/edit/edit.page').then(m => m.EditPage)
              },
              {
                path: ':placeId',
                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 try evrey thing to fix it and now show me blank page

Solution

I fix it by use loadcomponent for places.routing.ts

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

Answered By - ibrahim