Angular Ionic app RouterLink not working despite RouterLink imports

Question

I have an app that was setup using the ionic angular tabs template. For whatever reason I cannot use RouterLink to navigate. When I click the element that I've provided the RouterLink property to nothing happens. I've search for hours and seen the same suggestions as what is here: RouterLink not working in child components

I've actually added RouterLink in the imports on all my pages but still no luck. Using the angular ionic tab template I am going from a tab page to a nested details page. The tab page uses RouterLink successfully to navigate to my detail page. But in my detail page I cannot setup a link or a button to use RouterLink to navigate to another route. When I click the button nothing happens. What am I missing?

DetailPage - html

<ion-card>
  <ion-card-header>
    <ion-card-title>Bla</ion-card-title>
  </ion-card-header>
  <ion-card-content>
    <a [routerLink]="['/bla/1']">
      More...
    </a>
  </ion-card-content>
</ion-card>

detail-routing-module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DetailPage } from './detail.page';

const routes: Routes = [
  {
    path: '',
    component: DetailPage
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes),
    RouterModule 
  ],
  exports: [RouterModule],
})
export class DetailPageRoutingModule {}

detail.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { DetailPageRoutingModule } from './detail-routing.module';

import { DetailPage } from './detail.page';
import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    DetailPageRoutingModule,
    RouterModule 
  ],
  declarations: [DetailPage]
})
export class DetailPageModule {}

where is the actual route defined that should take you to the ['/bla/1'] ? also, have you tried to enable tracing to see router log ? RouterModule.forRoot(routes, { enableTracing:true }). Beginning route with '/' will look for route starting from root. is that your intention ? — ihorbond

mo_maat mo_maat · Accepted Answer · 2020-06-21T15:02:24

So it turns out that my issue was that my modules were not being loaded.

The page that had the RouterLink issue (DetailPage.html) was being routed to from another page using:

{
   path: 'detail/:competitionId',
   component: DetailPage,
},

Changing the above to what is below fixed the problems:

  {
    path: 'detail/:competitionId',
    loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
  },

Angular Ionic app RouterLink not working despite RouterLink imports

1 Answers