ion-router-outlet не показывает компонент, но router-outlet показывает

Question

Я экспериментирую с маршрутизацией ioni c и angular и столкнулся с некоторыми проблемами. У меня есть два компонента, первый и второй, и компонент app- root.

app.component. html:

<ion-app>
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Router App</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content>
    <ion-card>
      <ion-card-header>
        <ion-card-title>Click To Navigate</ion-card-title>
      </ion-card-header>
      <ion-card-content>
        <a routerLink="first-component" routerLinkActive="active"><ion-button>First</ion-button></a>
        <a routerLink="second-component" routerLinkActive="active"><ion-button>Second</ion-button></a>
      </ion-card-content>
    </ion-card>
  </ion-content>
  <ion-card>
    <ion-router-outlet></ion-router-outlet>
  </ion-card>
  
</ion-app>

и app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
import { FirstComponent } from './first/first.component';
import { SecondComponent } from './second/second.component';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: 'home-component', component: HomeComponent },
  { path: '', component: HomeComponent },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Два компонента - это просто

<p>componentName works!</p>

Теперь у меня проблема в том, что он не работает и ничего не отображает, когда я нажимаю на кнопки, чтобы показать компонент. Но, если я использую обычный angular, компоненты отображаются в самом низу страницы, оставляя большой промежуток посередине.

Я новичок в Angular, и это мой второй день поигрался с Ioni c, поэтому я не совсем уверен, где я ошибся.

Сообщите мне, если какая-либо дополнительная информация отсутствует, и я добавлю ее.

Заранее спасибо!

Answer 1

Попробуйте проложить маршрут вот так. Это способ по умолчанию ioni c. введите описание изображения здесь