Tips for resolving the issue with the message "ERROR TypeError: _co.loadedRecipe is undefined" and the error "ERROR Error: [object Object]"

Question

Tips for resolving the issue with the message "ERROR TypeError: _co.loadedRecipe is undefined" and the error "ERROR Error: [object Object]"

Currently, I am in the process of learning Ionic and Angular while attempting to implement routing where information is passed through the path like this:

path: ':recipeId',

My goal is to have a list of items with IDs so that when I click on an item, I can navigate to a detailed page for that specific item.

I have successfully displayed the page with the list of items (let's say it's at /recipes), but upon clicking on an item to go to the detail page (/recipes/id), I encounter the following error:

ERROR TypeError: "_co.loadedRecipe is undefined" View_RecipeDetailPage_0 RecipeDetailPage.html:11 Angular 24 RxJS 5 Angular 11 RecipeDetailPage.html:11:4 View_RecipeDetailPage_0 RecipeDetailPage.html:11 Angular 16 RxJS 5 Angular 11

This points towards the module's (or component's? still learning Angular) HTML code:

<ion-header>
  <ion-toolbar>
    <ion-title> {{ loadedRecipe.title }} </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
    <ion-grid>
        <ion-row>
            <ion-col>
                <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>

The issue seems to be that loadedRecipe is currently undefined.

Here is the controller TypeScript code:

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;

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

  ngOnInit() {
    console.log(this.activatedRoute.paramMap);
    this.activatedRoute.paramMap.subscribe(paramMap => {
        if (!paramMap.has('recipeId')) {
            // redirect because we don't have the necessary ID
            return;
        }

        console.log(paramMap);
        const recipeId = paramMap.get('recipeId');
        this.loadedRecipe = this.recipesService.getRecipe(recipeId);
    });
  }

}

App-routing module:

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

const routes: Routes = [
  { path: '', redirectTo: 'recipes', pathMatch: 'full' },
  {
    path: 'recipes',
    children: [
    {
      path: '',
      loadChildren: './recipes/recipes.module#RecipesPageModule'
    },
    {
      path: ':recipeId',
      loadChildren: './recipes/recipe-detail/recipe-detail.module#RecipeDetailPageModule'
    }
    ],
  }
];

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

List controller recipes.page.ts:

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

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.page.html',
  styleUrls: ['./recipes.page.scss'],
})
export class RecipesPage implements OnInit {

  recipes: Recipe[];


  constructor(private recipesService: RecipesService) { }

  ngOnInit() {
    this.recipes = this.recipesService.getAllRecipes();
  }

}

I suspect there might be an issue with the activated route, but as I am new to debugging web applications, any guidance or tips would be greatly appreciated.

angular typescript ionic4 angular8

Answer 1

Answer №1

Following Nicholas K's guidance is a step in the right direction. To provide further clarification, here is an example:

app-routing.module.ts

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

 const routes: Routes = [
   { path: '', redirectTo: 'recipes', pathMatch: 'full' },
   { path: 'recipes', loadChildren: './recipes/recipes.module#RecipesPageModule' },
   { path: 'recipe-detail/:id', loadChildren: './recipe-detail/recipe-detail.module#RecipeDetailPageModule' },
 ];

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

In recipe-detail.page.ts, as mentioned by Nicholas K, you can access the parameters in the activated route like so:

 ngOnInit() {
   this.id = this.route.snapshot.paramMap.get("id");
   if (this.id != null) {
     console.log('id: ' + this.id);
   }
 }

To navigate from the recipe page to the detail page, you can do it this way (alternatively, you could use routerLink instead of the click event to navigate):

recipes.page.html

 <ion-content>
   <ion-list>
     <ion-item *ngFor="let recipe of recipes" (click)="routeToRecipeDetail(recipe.id)">
       {{recipe.name}}
     </ion-item>
   </ion-list>
 </ion-content>

recipes.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';

 @Component({
   selector: 'app-recipes',
   templateUrl: './recipes.page.html',
   styleUrls: ['./recipes.page.scss'],
 })
 export class RecipesPage implements OnInit {

   recipes = [
     { id: 1, name: 'pizza' },
     { id: 2, name: 'hamburgers' },
     { id: 3, name: 'salad' }
   ]

   constructor(private router: Router) { }

   ngOnInit() {
   }

   routeToRecipeDetail(id: number) {
     this.router.navigateByUrl('/recipe-detail/' + id);
   }

 }

I have set up a github repository here for your reference. I hope this explanation helps.

Answer 2

Following Nicholas K's guidance is a step in the right direction. To provide further clarification, here is an example:

app-routing.module.ts

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

 const routes: Routes = [
   { path: '', redirectTo: 'recipes', pathMatch: 'full' },
   { path: 'recipes', loadChildren: './recipes/recipes.module#RecipesPageModule' },
   { path: 'recipe-detail/:id', loadChildren: './recipe-detail/recipe-detail.module#RecipeDetailPageModule' },
 ];

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

In recipe-detail.page.ts, as mentioned by Nicholas K, you can access the parameters in the activated route like so:

 ngOnInit() {
   this.id = this.route.snapshot.paramMap.get("id");
   if (this.id != null) {
     console.log('id: ' + this.id);
   }
 }

To navigate from the recipe page to the detail page, you can do it this way (alternatively, you could use routerLink instead of the click event to navigate):

recipes.page.html

 <ion-content>
   <ion-list>
     <ion-item *ngFor="let recipe of recipes" (click)="routeToRecipeDetail(recipe.id)">
       {{recipe.name}}
     </ion-item>
   </ion-list>
 </ion-content>

recipes.page.ts

 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';

 @Component({
   selector: 'app-recipes',
   templateUrl: './recipes.page.html',
   styleUrls: ['./recipes.page.scss'],
 })
 export class RecipesPage implements OnInit {

   recipes = [
     { id: 1, name: 'pizza' },
     { id: 2, name: 'hamburgers' },
     { id: 3, name: 'salad' }
   ]

   constructor(private router: Router) { }

   ngOnInit() {
   }

   routeToRecipeDetail(id: number) {
     this.router.navigateByUrl('/recipe-detail/' + id);
   }

 }

I have set up a github repository here for your reference. I hope this explanation helps.

Tips for resolving the issue with the message "ERROR TypeError: _co.loadedRecipe is undefined" and the error "ERROR Error: [object Object]"

Answer №1

Similar questions

Unable to connect to the directive even after adding it as an input

Just starting out with TypeScript and running into the error: "Cannot assign type 'null' to type 'User[]'"

Having trouble installing the Angular/CLI on macOS Mojave due to a node-pre-gyp error?

Obtain an error response from a REST API by utilizing Angular 2

Cypress symbolizes the logical OR condition within a repeating loop

The entire space should be filled with the background

Is it feasible to conditionally set a function parameter as optional?

Viewability of external values in angular designs

Guide on categorizing MUI icon types

When the back button is clicked, the Ionic Angular application will navigate to the login screen

Combining divs with identical values in Angular

Button is not responding to the Ionic [clear] property

Return attention to the original content of the page once the success banner at the top has been closed

Erase the destination pin on Google Maps

Leveraging Snowflake as a Data Type within Mongoose Schema

The command "tsc" was not found in this bash session

Performance of Angular4 UI decreases with a large amount of data objects

The issue with converting a string into an object in Typescript

Exploring the Power of Dynamic XML in Your Angular 4/5 Application

Ways to attach an event listener to a useRef hook within a useEffect hook