Angular: ChangeDetection not being triggered for asynchronous processes specifically in versions greater than or equal to Chrome 64

Currently, I'm utilizing the ResizeObserver in Angular to monitor the size of an element.

 observer = new window.ResizeObserver(entries => {
     ...
     someComponent.width = width;
 });
 observer.observe(target);

Check out this working example on StackBlitz

Everything runs smoothly when testing the code on Safari, Firefox, or Chrome 63.

However, with the release of Chrome 64 (according to Can I Use, now with native support), the functionality suddenly stops working as intended:

It seems that Chrome 64 fails to trigger change detection for events from the ResizeObserver.

Any insights or suggestions on what might be causing this unexpected behavior?

UPDATE: Based on the discussion below, I have made some updates to my post.

angular typescript angular2-changedetection zonejs

Answer №1

Zone.js has provided a patch for ResizeObserver that works with Chrome 64 and above. The patch is not yet released, so please be patient and wait for the next version of zone.js (0.8.21). You can find more information about this patch at https://github.com/angular/zone.js/pull/1012. Also, you can check out a working sample at https://github.com/JiaLiPassion/zone-resize-observer.

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

Angular Firebase Email Verification sent to an alternate email address

I am facing a challenge with my website that only accepts emails from a specific domain, such as a university domain. Users who want to sign up using Facebook or Google need to verify their university email, but I am struggling to find a way to send the ve ...

angular typescript firebase firebase-authentication angular7

What are the steps for implementing persisting and rehydrating data in redux-toolkit?

After setting up the redux-persist with react-toolkit as recommended in the documentation, I found myself needing to perform some operation on rehydrate. Unfortunately, my attempts have been unsuccessful so far. Here is what I have tried: ... import { RE ...

typescript redux redux-toolkit redux-persist

My goal is to eliminate the console error message "@ Angular: GET http://localhost:4200/assets/i18n/1/fr.json 404 (Not Found)" related to missing file

Is there a way to prevent the "GET http://localhost:4200/assets/i18n/1/fr.json 404 (Not Found)" error from appearing in both the console and network of the browser while using Angular? I need a solution for this.custom.translate.loader.ts****** return Obse ...

angularjs angular angular-i18n

What causes type checks to be skipped when spreads are used on type-guarded types?

Query: Why doesn't a compile-time error occur when I overlook adding nested fields to an object of type T, while constructing the object using object spread? Illustration: interface User { userId: number; profile: { username: string } } f ...

typescript typescript-generics

When attempting to send an email with nodemailer, an error message popped up saying "setImmediate is not defined."

let transporter = nodemailer.createTransport({ host: "sandbox.smtp.mailtrap.io", port: 2525, auth: { user: "xxxxxx", pass: "xxxxxx" }, tls: { rejectUnauthorized: false } ...

typescript email next.js nodemailer

Encountering an error message stating "The variable 'App' is declared but not used" when running the index.tsx function

This React project is my attempt to learn how to use a modal window. The tutorial I've been following on YouTube uses JavaScript instead of TypeScript for their React project. However, I'm facing some challenges. Could you possibly help me ident ...

reactjs typescript function

Undefined TypeScript Interface

Here's my situation: public retrieveConnections() : IUser[] { let connections: IUser[]; connections[0].Id = "test"; connections[0].Email = "asdasd"; return connections; } I know this might be a dumb question, but why is connecti ...

javascript typescript

Tips for ensuring elements within a modal receive immediate focus when opened in Angular 2

I am relatively new to Angular JS and I am encountering some challenges with implementing a directive in Angular 2 that can manage focusing on the modal when it is opened by clicking a button. There have been similar queries in the past, with solutions pr ...

javascript angular angular2-directives

Ionic 2: Unveiling the Flipclock Component

Can anyone provide guidance on integrating the Flipclock 24-hours feature into my Ionic 2 application? I'm unsure about the compatibility of the JavaScript library with Ionic 2 in typescript. I have searched for information on using Flipclock in Ionic ...

javascript angular typescript ionic2 flipclock

Unusual problem with accessing Object values in vscode using typescript

When attempting to write Object.values in TypeScript, I encounter a visual error (although it compiles without issues). https://example.com/image1.png I have tried searching online and restarting vscode, and here is my current tsconfig.json. https://exa ...

typescript visual-studio-code eslint ecmascript-2017

Steps to include a horizontal divider in the footer section of an angular-material table

Is it possible to add a line between the last row (Swimsuit) and the footer line (Total)? If so, how can I achieve this using Angular 15? https://i.stack.imgur.com/581Nf.png ...

css angular angular-material

Update the HttpClient URL in Angular based on language switch

I am currently working on creating a portfolio where the language changes in the menu will dynamically update the components to load the appropriate JSON data. I attempted to use BehaviourSubject and subject, but I found them difficult to understand and im ...

json angular angular-httpclient

"Error: The method setValue is not found in the AbstractControl type" when trying to clear form in Angular 2

Here is the template code: <form [formGroup]="form" (ngSubmit)="onSubmit(form.value)" novalidate="novalidate"> <textarea [ngClass]="{ 'error': comment }" [formControl]="form.controls['comment']" ...

angular typescript

Preventing CORS issues when making HTTP requests to an Elasticsearch server using Angular hosted on Firebase

As someone who is a bit out of touch with web technologies, I'm pretty sure this question has been asked before. However, I am struggling to understand what CORS is and why it is causing my simple HTTP request to be blocked. I am currently working on ...

node.js angular elasticsearch cors xmlhttprequest

Creating a dynamic popup/modal in Angular 7 using a service

As a newcomer to Angular, I find myself with a question regarding services. In the past, when working with other languages, I would create self-contained components that could be called from anywhere within the application. Currently, my need for popup di ...

angular dialog modal-dialog popup

What is the best way to incorporate cors modules in TypeScript?

I am encountering some difficulties while attempting to import the cors module in a TypeScript project using Express. When I use the following code: import cors from "cors"; I receive the following error message: "Cannot find module &apos ...

What do you do when schema.parseAsync cannot be found?

Currently facing an issue with zod validation in my Node.js environment, specifically encountering the error: TypeError: schema.parseAsync is not a function Despite attempting various solutions like re-importing and troubleshooting, I am unable to resol ...

javascript typescript validation zod

Executing an observable only when a certain variable is in a specific state at the class level

Is there a way to conditionally return an observable in a clean manner, based on a predefined condition? Let's look at the scenario below: isEditing = false; // <---- Variable defined at class level return this.usersService.fetchInitialCreateDat ...

angular rxjs rxjs6 rxjs-observables rxjs-marbles

Is it possible for an object to receive notifications when a component object undergoes changes in Angular 2/4?

When working with Angular components, it's possible to pass a variable or object as @Input(). The component will be notified whenever the value of this input changes, which is pretty cool... I'm currently developing an application that features ...

javascript angular data-binding angular2-databinding

Adding an anchor tag to an ngx-datatable-column can be done by utilizing the properties

My task involves loading data from the server and populating the ngx-datatable. When a specific column is clicked (with either a link <a href="randomurl"/> or [routerLink]="randomcomponent"), it should redirect to a different page or display a modal ...

angular typescript ngx-datatable

TypeScripter Q&A