Angular 我如何更新此Ionic应用程序以解决路由问题

我目前在Ionic应用程序开发课程中遇到一些问题，该课程假定使用Ionic 4或Ionic 5，而我正在使用版本7.具体地说，我遇到了有关路由的问题.

提供的代码成功地显示了http://localhost:8101/recipes.的主页但是，当try 访问http://localhost:8101/recipes/r1，时，只会显示一个空白页面.

我怀疑版本差异可能是问题的原因.您能帮助我确定必要的更新或修改，以使此Ionic应用程序与版本7无缝工作吗？

以下是相关代码的片段:

下面是Receipe.Model.ts文件:

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

const recipe: Recipe = new Recipe();  

以下是Deciplees.Serice.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;
      })!
      
    }
  }
}

下面是recipe-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)!;

    });
  }

}

下面是Recipe-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>

我试着在YouTube上寻找答案，但也没有太多的运气.