Modern Angular App Routing - cant get it to work properly

Ionic Framework Ionic Angular
1

Hi,

I am working on a “modern angular” tabbed ionic app (Angular 18, Standalone Components, …)

I can’t get the transition to a sub page work properly. Using an <a> just switches pages like a normal website page change. No transition or whatsoever. No back button on the sub page present (back button of my original app, the test here doesnt implement it). [routerLink] just won’t do anything.
So the proper routing just does not happen at all.

I tried to reproduce it with the bootstrap “photo-gallery” application and I got bad luck there, too.

Basically I just created a new app via cli

ionic start photo-gallery tabs --type=angular --capacitor

added a route to a sub page (recycled another tab page)

 {
  path: 'tab1/tab2',
   loadComponent: () =>
     import('../tab2/tab2.page').then((m) => m.Tab2Page),
 },

and added the links to tab1.page.html

<a href="/tabs/tab1/tab2">to sub</a>
<ion-button [routerLink]="['/tabs', 'tab1', 'tab2']">to sub</ion-button>

respectively, as I get Can't bind to 'routerLink' since it isn't a known property of 'ion-button' with [routerLink]:

<ion-button routerLink="/tabs/tab1/tab2" routerDirection="root">to sub</ion-button>

IonRouterLink, IonRouterLinkWithHref are imported in tab1.page.ts and set on @Component({ imports })

Everything seems to be properly configured according to Build Options | Ionic Documentation

The browser console does not tell anything.

Arc browser (chromium)

I feel like I must have missed something obvious … yet …

:man_shrugging:

cheers