Infinite loop in Angular 6 application caused by zone.js draining the micro task queue

I have encountered an issue with my Angular 6 app. While it runs smoothly on my Windows machine, I face difficulties when trying to run the same code on my MAC. The browser appears to be stuck in a perpetual 'loading' state and there are no errors displayed in the console.

Angular CLI: 6.0.8
Node: 9.2.0
OS: MAC High Sierra
Angular: 6.0.6

Update: After inserting console.log statements in my app component, I noticed that the logs were being hit. It seems like the application is loading but not rendering properly, while the browser continues to show a loading symbol.

Upon adding a debugger statement and initiating debugging, I discovered that the issue lies within zone.js, specifically in a function called drainMicroTaskQueue which gets stuck in an infinite loop. Although some online solutions attribute this problem to routing, I am not entirely convinced that routing is the root cause of my issue.

Attached is a screenshot of the Safari developer console: (I removed socket.io from my application, yet the issue persists with vendor.js endlessly loading) https://i.sstatic.net/u7wYG.png

Your help will be greatly appreciated!

javascriptangulartypescriptbuild

Answer №1

There was a problem in my application where an asynchronous call was continuously looping, resulting in the app appearing to freeze. Interestingly, this issue only occurred on iOS and MAC devices, while Windows seemed unaffected. By removing the problematic call, I was able to resolve the freezing issue and restore normal functionality to the app.

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

What is the best method for converting a plist file into a json file?

Is there a way to convert an existing plist file into a JSON file using one of the following programming languages: JavaScript, Java, Objective-C, Python, or Ruby? Any suggestions on how to do this? ...

javascriptiphoneobjective-cjsonplist

Retrieve the value of a keypress in a Vue select field

I am currently utilizing vue-search-select to enable autocomplete on a select field. I am now interested in retrieving the input entered by the user for searching from the select field. I attempted using the keyup event without success. Is there another ...

javascriptvue.jsautocomplete

Having trouble setting a JavaScript variable with a PHP session variable

In my PHP file, I have a session variable named $_SESSION['SESS_USER_TYPE'] set to a 2-character string. After the PHP script redirects to an HTML file, I need to retrieve this session variable in a JavaScript variable. This is how I am attempti ...

phpjavascript

Maximizing the efficiency of enums in a React TypeScript application

In my React application, I have a boolean called 'isValid' set like this: const isValid = response.headers.get('Content-Type')?.includes('application/json'); To enhance it, I would like to introduce some enums: export enum Re ...

reactjstypescriptenums

Is there another option besides PHP not being compatible with JavaScript?

I'm looking to dynamically change the properties of a div, so I've turned to using the jquery.keyframes plugin. The second class currently has a low-res blurred background image from the croploads directory. Now my goal is to switch it out for a ...

javascriptphpjquery

What is the best way to transfer information from Python FLASK to a database?

Below is my Python script: @restServer.route("/sendData", methods=['POST']) def client(): ID = request.form.get('ID') name = request.form.get('name') postcode = request.form.get('postcode') dateofbirth = request.for ...

javascriptpythonmysqldatabaseflask

Firebase Error: Trying to access properties of null object (indexOf)

Whenever I try to console.log(docSnap), a Firebase error shows up as seen in the image below. Despite attempting various solutions, none have proved effective. https://i.sstatic.net/9R4vE.png useEffect(() => { if (folderId === null) { ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Executing a method within an Angular Controller externally

I'm attempting to invoke a function within an Angular controller from outside of the controller. Here's an example snippet of my code: var myApp = angular.module('myApp'[]) .controller('MainController', ['$scope', ...

javascriptangularjs

Tips for reverting a component back to its initial state in React when a prop is modified

I am dealing with a prop named props.currPage. This prop gets updated based on the button that is clicked. Whenever a button is clicked, I want a certain part of the component to reset to its initial state. Unfortunately, I am facing an issue where the "l ...

javascriptreactjsaudioreact-props

Issue with NGXS Selector Observable not reflecting updated state

My issue is that when I update the state, my selector does not pull the new values. I have defined the selector in my state and I can see the state values getting updated. However, the selector in my component is not fetching the latest values. Even though ...

angularobservablestatengxs

Ionic is encountering a problem with module build, specifically an error related to the absence of a file or directory

Using Ionic has led to encountering the following error message: Runtime Error Uncaught (in promise): Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/richardmarais/Development/ionic/theWhoZoo/src/pages/model/r ...

visual-studioangularionic-frameworkionic2

I'm having trouble getting PHP/AJAX to return the expected XML data - it keeps

I have a JavaScript script that looks like this: function showItems(type) { var xmlhttp = new XMLHttpRequest(); //creating object var call = "getitems"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState ...

javascriptphpajax

Tips on merging several JavaScript files into a singular one while maintaining the operation of electron

Query: Is there a way to combine multiple JavaScript files into one file and obfuscate it, while still being able to execute it with Node.js Electron? Consideration: I am aware that all JavaScript files in an Electron project can be obfuscated and execu ...

javascriptnode.jselectron

Error: The function .join is not recognized by the sockets.io library in a Node.js client-server environment

I'm currently working on developing a chat app using node and vue js, and I've encountered an issue with the socket.io library. Specifically, I keep receiving an error stating that ".join is not a function" when trying to use it in my server-side ...

javascriptnode.jsexpresssocketssocket.io

Processing and filtering CSV file data in Node.js and then presenting it in a tabular format on the console

I have a spreadsheet (CSV) file containing survey data that I need to process and filter in Node.js. My goal is to display the filtered data in the console in a table format with the column names visible. What would be the most efficient way to achieve thi ...

javascriptnode.jscsv

Set a variable to contain a specific scope in JavaScript

I'm struggling to pass user input from a text box stored in $scope to a firebase query. Here's the code I have so far: $scope.array = []; $scope.addListItem = function(quote){ $scope.array.unshift(quote); console.log(quote) this.customQuote = ...

javascriptangularjsangularjs-scope

What methods can I utilize to manage the output generated by the C# backend project?

I'm new here and I'm thrilled to be asking my first question! :) Currently, I am working on a car rental project using C# for the backend and Angular for the frontend. I have encountered an issue while trying to register a new user with existing ...

c#angularpostmanbad-request

The issue of Angular Service Broadcast not functioning as expected when integrated with routing

When I subscribe to an event in Service, I am able to access the emitted data in another component. However, when I attempt to route the page, the data is being set in ngOnInIt() but after the routing process starts, it reverts back to its default state. T ...

angularangular2-routingangular2-services

Is it possible to combine $regex with $gte and $lte operators for strings in MongoDB?

I have a date of the transaction stored in MongoDB database in the format "7/1/2021 12:30:48 PM" (as a string in M/D/YYYY). On the React side, I am entering two dates: From date and To Date, both in the format YYYY-MM-DD. Below is the code I am using to fi ...

javascriptnode.jsreactjsregexmongodb

The object's key values were unexpectedly empty despite containing data

There's an issue with my object - it initially gets key values, but then suddenly loses them all. All the key values become empty and a message appears in the console for the object: "this value was evaluated upon first expanding. it may have ch ...

javascriptangulartypescriptobjectionic-framework