Ionic 8/Angural 20: url parameter problem

Ionic Framework Ionic Angular
1

Hi,

I need to use url parameters to make app page link include the parameter values for page. I have used two good material from Simon Grimm:

Anyway I could not make the system work. The materials I have mentioned are slighttly old and there is something i don’t get right. Can you please help me on this. With the setting below the app can’t find any page for example url: http://localhost:8100/tabs/tab1/44 gives just 404-error. It should open tap1 with id=44

main.ts

import { enableProdMode, importProvidersFrom} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, RouterConfigurationFeature, provideRouter, withComponentInputBinding } from '@angular/router';
import { IonicRouteStrategy, provideIonicAngular } from '@ionic/angular/standalone';
import { defineCustomElements } from '@ionic/pwa-elements/loader';
import { routes, } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { IonicStorageModule } from '@ionic/storage-angular';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
    provideIonicAngular(),
 
    provideRouter(routes, withComponentInputBinding()),
    provideHttpClient(withInterceptorsFromDi()),
    importProvidersFrom(IonicStorageModule.forRoot()),

app.routes.ts

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


export const routes: Routes = [
  { path: '', redirectTo: '', pathMatch: 'full' },
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.routes').then((m) => m.routes),
  },
   {
    path: 'login',
    loadComponent: () => import('./login/login.page').then( m => m.LoginPage)
  },
  {
    path:'tab1',
    loadComponent: () =>import('./tab1/tab1.page').then(m=>m.Tab1Page)
   },
  {
    path:'tab1/:id',
    loadComponent: () =>import('./tab1/tab1.page').then(m=>m.Tab1Page)
   },
   {

tab1.ts

import { Component, OnInit, Input } from '@angular/core';

@Input() id: string | null = null;

ngOnInit(){
console.log('url_id: ', this.id);
}