A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

Question

A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

As a newcomer to Angular2, I am currently developing a web application that requires three separate calls to a REST API. To test these calls, I decided to simulate the API responses by creating three JSON files with the necessary data. However, my implementation is not functioning as intended, and upon checking the developer console, I encountered the following error:

Uncaught (in promise): Error: Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded

Please refer to the code snippets below for more details:

The template - search.template.html:

<search>
  <h1>Angular2 HTTP Demo App</h1>
  <h2>Foods</h2>
   <!-- Rest of the HTML content goes here -->
</search>

I seem to be stuck trying to identify the root cause of this error within the codebase. If anyone could provide some insights or assistance on resolving this issue, it would be greatly appreciated. Thank you!

javascript json angular typescript

Answer 1

Answer №1

After examining your search.template.html, the recommendation is to eliminate the use of <search> tags. The presence of this search tag in the HTML template is causing a recursive issue, ultimately resulting in an error indicating that the Maximum call stack size has been exceeded.

Instead, structure your template as shown below-

  <h1>Angular2 HTTP Demo App</h1>
  <h2>Foods</h2>
  <ul>
    <li *ngFor="let food of foods"><input type="text" name="food-name" [(ngModel)]="food.name"><button (click)="updateFood(food)">Save</button> <button (click)="deleteFood(food)">Delete</button></li>
  </ul>
  <p>Create a new food: <input type="text" name="food_name" [(ngModel)]="food_name"><button (click)="createFood(food_name)">Save</button></p>
  <h2>Books and Movies</h2>
  <h3>Books</h3>
  <ul>
    <li *ngFor="let book of books">{{book.title}}</li>
  </ul>
  <h3>Movies</h3>
  <ul>
    <li *ngFor="let movie of movies">{{movie.title}}</li>
  </ul>

Please make these adjustments and see if it resolves the issue at hand.

Answer 2

After examining your search.template.html, the recommendation is to eliminate the use of <search> tags. The presence of this search tag in the HTML template is causing a recursive issue, ultimately resulting in an error indicating that the Maximum call stack size has been exceeded.

Instead, structure your template as shown below-

  <h1>Angular2 HTTP Demo App</h1>
  <h2>Foods</h2>
  <ul>
    <li *ngFor="let food of foods"><input type="text" name="food-name" [(ngModel)]="food.name"><button (click)="updateFood(food)">Save</button> <button (click)="deleteFood(food)">Delete</button></li>
  </ul>
  <p>Create a new food: <input type="text" name="food_name" [(ngModel)]="food_name"><button (click)="createFood(food_name)">Save</button></p>
  <h2>Books and Movies</h2>
  <h3>Books</h3>
  <ul>
    <li *ngFor="let book of books">{{book.title}}</li>
  </ul>
  <h3>Movies</h3>
  <ul>
    <li *ngFor="let movie of movies">{{movie.title}}</li>
  </ul>

Please make these adjustments and see if it resolves the issue at hand.

A promise was caught with the following error: "Error in ./Search class Search - inline template:4:0 caused by: Maximum call stack size exceeded"

Answer №1

Similar questions

Enhancing JSON Objects in AngularJS with Custom Properties and Calculations

Exploring Pandas capabilities with complex nested JSON structures

Blocking negative values when a button is clicked in Vue.js using v-on:click

Sit tight as we prepare all static assets for loading on the screen

Unable to incorporate node-vibrant into Angular 7 project

Ways to restrict users from inputting alphabets in TextField using material ui

How can I individually bind each element in a ngFor loop?

"An error in the signature index results in the failure of the

Get access to the file upload field using ajax

The extended class possesses a distinct type from the base class, which is reinforced by an interface

How can props be defined in Vue3 using Typescript?

Utilizing TypeScript's conditional return type with an object as a parameter, and incorporating default values

What steps are necessary to add a Contact Us form to my HTML website?

Utilize jQuery to export HTML or JSON data to an Excel spreadsheet

There is no index signature that includes a parameter of type 'string' in the specified type

AngularFire Google OAuth failing to retrieve the user's email address

Obtaining the scene's coordinates in Three.js

Is there a way to retrieve data from a servlet using jQuery without having to make a request?

Tips for styling an array of objects using mapping techniques

Vue: Struggling to render JavaScript Map containing keys and values using v-for :key