Angular Ioni c приложение RouterLink не работает, несмотря на импорт RouterLink

Question

У меня есть приложение, которое было настроено с использованием шаблона вкладок ioni c angular. По какой-то причине я не могу использовать RouterLink для навигации. Когда я щелкаю элемент, который я предоставил свойством RouterLink, ничего не происходит. Я часами искал и видел те же предложения, что и здесь: RouterLink не работает в дочерних компонентах

Я действительно добавил RouterLink в импорт на всех моих страницах, но все еще нет удача. Используя шаблон вкладки angular ioni c, я перехожу со страницы вкладки на страницу вложенных сведений. Страница вкладки успешно использует RouterLink для перехода к моей странице сведений. Но на моей странице сведений я не могу настроить ссылку или кнопку для использования RouterLink для перехода к другому маршруту. Когда я нажимаю кнопку, ничего не происходит. Что мне не хватает?

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 {}

Answer 1

Итак, моя проблема заключалась в том, что мои модули не загружались.

Страница с проблемой RouterLink (DetailPage. html) перенаправлялась с другой страницы с использованием:

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

Изменение вышеуказанного на то, что ниже, устранило проблемы:

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