Router-link dont execute in Ionic

Issue

i’m trying to create a simple route in ionic7. i’m using angular. actually it should work like this, but after the latest ionic7 patch it doesn’t work anymore. i want to get to the network page. my error looks like this

re.mjs:8416 ERROR Error: Uncaught (in promise): Error: NG04002: Cannot match any routes. URL Segment: 'home/network'
Error: NG04002: Cannot match any routes. URL Segment: 'home/network'

app.routes.ts:

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

export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
  {
    path: 'network',
    loadComponent: () => import('./home/network/network.page').then( m => m.NetworkPage)
  },
];

main.ts

import { enableProdMode, importProvidersFrom } from '@angular/core';
import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
import { RouteReuseStrategy, provideRouter } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { HttpClientModule} from '@angular/common/http';

import { routes } from './app/app.routes';
import { AppComponent } from './app/app.component';
import { environment } from './environments/environment';
import { CommonModule,} from '@angular/common';

if (environment.production) {
  enableProdMode();
}

bootstrapApplication(AppComponent, {
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy,},
    importProvidersFrom(IonicModule.forRoot({}),HttpClientModule,CommonModule,BrowserModule,),
    provideRouter(routes),
  ],
});

home.page.html:

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

  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">

  <ion-row>
    <ion-col size="6">
      <ion-card color="primary" [routerLink]="['network']">
        <ion-card-header class="ion-text-center">Network</ion-card-header>
      </ion-card>
    </ion-col>
  </ion-row>

</ion-content>

Solution

Try this

[routerLink]="['/network']"

Answered By – mani kandan

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published