CODEWITHSUNDEEP
angularionic-framework
clem
clem

Reputation: 897

Why angular router reload page with routerLink directive?

I did a migration from Angular 10 to 13 and Ionic 5 to 6.

With my current set-up (Angular 13, Ionic 6), I have a strange behavior: when I navigate to new page using routerLink directive, the new page reload and the page stack is lose.

The behavior is the same as user typing directly the URL in navigator bar.

I tried to find similar issue or way to understand this behavior but nothing.

Can you help me please ?

Router Root configuration:

    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules,
      anchorScrolling: 'enabled',
      enableTracing: false,
      relativeLinkResolution: 'legacy'
    })

Link button integration:

<ion-button [routerLink]="['/dashboard/targets']" [queryParams]="{s: 'community'}" ...>...</ion-button>

Router Child configuration:

    RouterModule.forChild([
      {
        path: 'targets',
        loadChildren: () => import('./targets/targets.module').then( m => m.DashboardTargetsPageModule)
      }
    ]),

Upvotes: 1

Views: 427

Answers (2)

SteveC
SteveC

Reputation: 687

I found that by pushing to the router manually prevented this behaviour (which was also caused a re-load of my root component and Pinia stores).

Note that I am using @ionic/vue 7.1.3 and @ionic/vue-router 7.1.3 on a Vue 3 project, but I think that this will probably solve your problem.

For example, I replaced:

<ion-card :href="`locn/${locn.id}`">

with:

<ion-card @click="navigateTo()">

and in the Vue script setup:

import router from '@/router';
...
function navigateTo(): void {
    router.push({ name: 'locn', params: { id: props.locn.id } });
}

In Angular you would need to expose navigateTo as a public or protected function.

Upvotes: 0

Talon
Talon

Reputation: 371

There is a bug in Ionic 6, it was resolved in Ionic 6.0.16, try install that version.

npm install @ionic/[email protected]

Upvotes: 1

Related Questions