¿Cómo puedo actualizar esta aplicación Ionic para solucionar problemas con el enrutamiento?

Actualmente tengo problemas con un curso de desarrollo de aplicaciones Ionic que supone el uso de Ionic 4 o 5, mientras trabajo con la versión 7. Específicamente, tengo problemas con el enrutamiento.

El código proporcionado muestra correctamente la página de inicio en http://localhost:8101/recipes. Sin embargo, al intentar acceder a http://localhost:8101/recipes/r1, solo se muestra una página en blanco.

Sospecho que la diferencia de versión podría ser la causa del problema. ¿Podría ayudarme a identificar las actualizaciones o modificaciones necesarias para que esta aplicación Ionic funcione perfectamente con la versión 7?

A continuación se muestran fragmentos de código relevante:

Aquí está el archivo receta.model.ts:

export class Recipe {
    id: string = '';
    title: string = '';
    imageUrl: string = '';
    ingredients: string[] = [];
}

const recipe: Recipe = new Recipe();  

aquí está el archivo Recipes.service.ts:

import { Injectable } from '@angular/core';
import { Recipe } from './recipe.model';

@Injectable({
  providedIn: 'root'
})
export class RecipesService {

  private recipes: Recipe[] = [
    {
      id:'r1',
      title: 'Scnitzel',
      imageUrl:'https://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Breitenlesau_Krug_Br%C3%A4u_Schnitzel.JPG/220px-Breitenlesau_Krug_Br%C3%A4u_Schnitzel.JPG',
      ingredients: ['French Fries','Pork Meat','Salad']
    },
    {
      id:'r2',
      title: 'Spaghetti',
      imageUrl:'https://upload.wikimedia.org/wikipedia/commons/2/2a/Spaghetti_al_Pomodoro.JPG',
      ingredients: ['Spaghetti','Meat','Tomatoes']
    }
  ];

  constructor() { }

  getAllRecipes(){
    return [...this.recipes];
  }

  getRecipe(recipeId: string){
    return{
      ...this.recipes.find(recipes=>{
        return recipes.id === recipeId;
      })!
      
    }
  }
}

Aquí está el archivo receta-detail.page.ts:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { RecipesService } from '../recipes.service';
import { Recipe } from '../recipe.model';

@Component({
  selector: 'app-recipe-detail',
  templateUrl: './recipe-detail.page.html',
  styleUrls: ['./recipe-detail.page.scss'],
})
export class RecipeDetailPage implements OnInit {
  loadedRecipe: Recipe = new Recipe();

  constructor(
    private activatedRoute: ActivatedRoute, 
    private recipesService: RecipesService) 
    { }

  ngOnInit() {
    this.activatedRoute.paramMap.subscribe(paramMap =>{
      if (!paramMap.has('recipeId')) {
        //redirect
        return;
      }
      const recipeId = paramMap.get('recipeId')!;
            this.loadedRecipe = this.recipesService.getRecipe(recipeId)!;

    });
  }

}

aquí está el archivo receta-detail.page.html:

<ion-header [translucent]="true">
  <ion-toolbar color="primary">
    <ion-title>{{ loadedRecipe.title }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid no-padding>
    <ion-row>
      <ion-col no-padding>
        <ion-img [src]="loadedRecipe.imageUrl"></ion-img>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <h1>{{ loadedRecipe.title }}</h1>
      </ion-col>
    </ion-row>
    <ion-row>
      <ion-col>
        <ion-list>
          <ion-item *ngFor="let ig of loadedRecipe.ingredients">
            {{ ig }}
          </ion-item>
        </ion-list>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

Intenté buscar respuestas en YouTube, pero tampoco tuve mucha suerte.

Feb 16 '24 14:02 user758078