Angular 6 - The state of the expression was altered after it was verified, different types of constructions

During the build process in debug mode with ng build, I am encountering errors in some components. However, when I switch to production mode using ng build --prod, these errors disappear.

I am curious as to why this discrepancy is occurring.

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked

Thank you

Answer №1

A common issue is that this error is not visible in prod mode but appears when running a dev build. This warning or error indicates that the input variables have been modified before the change detection process is complete.

During development, change detection is triggered twice for every @Input change. If any variable is updated in child components during this process, you may encounter this error.

In production mode, change detection only occurs once, so it may not detect changes made to inputs during the process.

To learn more about this error and how to prevent it, check out this article.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the border color of a Material UI textbox is overriding the default style

Upon the initial page load, I expected the border color of the text box to be red. However, it appeared grey instead. I tried setting the border color to red for all classes but the issue persisted. Even after making changes, the border color remained unch ...

The error message "Each item within a list must be assigned a unique 'key' prop" is being displayed

At the moment, I'm immersed in a project that utilizes React, Next.js, and Ant-Design. However, during the development process, I encountered an error due to the absence of a unique key like so: Here's the detailed log of the error: Warning: Ea ...

A Defer statement in TypeScript that mimics Go's functionality

Is there an equivalent to Go's Defer statement in TypeScript? I find it tedious to write cleanup code in various parts of a function. Searching for a simpler alternative. I tried searching on Google, but couldn't locate any relevant information ...

Unable to retrieve any values using the for each loop in AngularJS

Having an issue with my Angular.js foreach loop. When I use console.log('course data',response.data); the output looks like this: course data [Object, Object, Object] 0: Objectcourse_name: "Master of computer 1: Objectcourse_name: "Bachelor of ...

Navigating with the InAppBrowser in Ionic Angular after a POST request

Currently, I am in the process of redirecting my app to 3DS for a payment method. According to the documentation, the steps involved are: Obtain the action.url and the action.method from the /payments response. Redirect the shopper to the specified URL us ...

Modifying the embed to shift colors over a specified duration in discord.js

case 'test': let time = "10s" const testEmbed = new Discord.RichEmbed() .setTitle("Testing") .setColor('#000000') message.channel.send(testEmbed); setTimeout(function(){ testEmbed.setColo ...

Update all the key values in the JSON file to be empty strings

Looking for a solution to modify the values in a list of flat JSON key-value pairs by replacing them with empty strings. Below is an example of the JSON data: { "wl.label.accountPin": "Account PIN", "wl.label.logon": ...

What is the method for retrieving the IDs of checkboxes that have been selected?

I attempted running the following code snippet: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="http://static.jstree.com/v.1. ...

Strict mode does not allow duplicate data properties in object literals within JavaScript

Challenge Description I am facing an issue with handling an optional variable called ByteRange. To accommodate this, I included 2 different URLs in the $resource. Upon doing so, I encountered the following error: Message: Error in parsing: "tools/tes ...

I am facing difficulties in retrieving data from MongoDB using Angular 8

Having trouble loading data from MongoDB using Angular 8? I've successfully loaded data with https://jsonplaceholder.typicode.com/, but when trying locally at 'http://localhost:3000/employees', it doesn't work. I can post data but una ...

Managing numerous ajax forms within a single page

Upon receiving advice from the following inquiry Multiple forms in a page - loading error messages via ajax, I am endeavoring to incorporate multiple forms within one page. The goal is to insert error messages into the corresponding input div classes. I pr ...

Although it may not be a constructor, the types certainly align perfectly

Although this question has been asked countless times before, none of these solutions seem to work in my case. Whenever I try to call the Config constructor, I encounter a TypeError: Config is not a constructor. Despite researching on Stack Overflow and M ...

Testing abstract class methods in Jest can ensure full coverage

In my project, I have an abstract generic service class. export default abstract class GenericService<Type> implements CrudService<Type> { private readonly modifiedUrl: URL; public constructor(url: string) { this.modifiedUrl = ...

In order to utilize Next.js with pkg, you must enable one of the specified parser plugins: 'flow' or 'typescript'

Utilizing next.js with the pkg in my project, following the steps outlined in this tutorial, I encountered an error when running the pkg command: > Error! This experimental syntax requires enabling one of the following parser plugin(s): 'flow, t ...

What is the best way to achieve the functionality of this ajax jquery using vanilla JavaScript?

I am attempting to replicate this jQuery ajax POST request in Vanilla JS, which currently looks like: $.ajax({ method: 'POST', url: window.location.href + 'email', data: { toEmail: to, fromName: from, ...

Refreshing the page to display new data after clicking the update button

function update(){ var name= document.getElementById("TextBox").value; $.ajax({ url: '....', type: 'post', ...

Consistently encountering issues when attempting to submit JSON data via POST request (body in raw format

I'm facing an issue with sending data to my server. Currently, I am working on a project using react native and axios version ^0.16.2. let input = { 'longitude': -6.3922782, 'latitude': 106.8268856, 'content': &apos ...

How can I retrieve the value of an HTML component when submitting a form?

In my ExpressJS application, I have two pages: home and user. In the home.js file, I create a form that navigates to the user.js page when submitted. While I am able to retrieve values from input components, I am facing issues with other components. How ca ...

Creating dynamic components from JSON elements does not trigger a rerender of components within an array

Imagine having a simplified input structure like this: [ { type: "text", text: "how are you {name}" }, { type: "input", input: "name" }, { type: "text", text: "good to ...

AngularJS $compile function is failing to render a custom template

Hi there, I am facing an issue while trying to render a custom template using the $compile function. The error message I keep getting is: unrecognized expression: {{senddata}} I have provided my code below for reference: app.controller('MainCtrl&ap ...