Is it possible to use AngularJS promise scheduling with `async`/`await` syntax?

When working with AngularJS services, TypeScript often recommends that I switch my code to use async/await functions.

https://i.sstatic.net/vks1i.png

While I understand that using the await keyword is compatible with third-party promises because it essentially translates to calling then, I typically stick with returning Angular promises to ensure smooth interaction with the digest cycle.

https://i.sstatic.net/vVpYO.png

Even though async functions wrap their content in an ES6 promise, I encounter an error in this particular code. I wonder if this will impact Angular scheduling, considering that the returned promise is still connected to an Angular-generated one. Should I consider raising a concern with TypeScript for suggesting async/await when functions don't explicitly return an ES6 promise?

Answer №1

If you come across this post in the future, be aware that there are some quirks to consider. When using async functions, they wrap their content in a global ES6 promise. This means that if you await AngularJS promises within, the changes will eventually take effect. However, combining $q promises and ES6 promises can result in odd scheduling behavior, causing a delay before changes reflect in the DOM.

In contrast, Angular 2+ has implemented modifications to DOM event sources and promises, making async-await operate as expected in newer releases.

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

Exploring the functionalities of TypeScript's mapKey and pick features

I am looking to convert the JavaScript code shown below into TypeScript, but I don't want to use loadish.js. let claimNames = _.filter<string>(_.keys(decodedToken), o => o.startsWith(ns) ); let claims = <any>( _.mapKeys(_ ...

AngularJS Toggle Directive tutorial: Building a toggle directive in Angular

I'm attempting to achieve a similar effect as demonstrated in this Stack Overflow post, but within the context of AngularJS. The goal is to trigger a 180-degree rotation animation on a button when it's clicked – counterclockwise if active and c ...

How to Enhance Angular ui-router nested views with Resolve?

I have been working on creating a customized version of my Angular 1.4.12 application with nested views. The main purpose behind this customization is to accommodate sections within the app that require a header/content/footer structure, while others do no ...

Use the ng-pattern regex to specifically identify instances where a pattern occurs only once

Looking for a string pattern 'abcd' followed by a colon(:) and any number of integers, with the restriction that this pattern cannot be repeated. Here are some examples of valid patterns: - abcd:23415 - abcd:23 And invalid patterns: - asda:4 ...

Converting objects into an array of arrays: A Step-by-Step Guide

My attempts have not yielded the desired outcome Object.keys(data).forEach(function (key) { console.log(data[key]); array = $.map(data[key], function(value, index) { return [value]; }); }); The output I encountered is - 0:{1: 2, 2: ...

Choosing elements based on their ng-model attributes using selenium-webdriver

Currently, I am utilizing Ruby along with the gem selenium-webdriver to navigate through a challenging angular form that is beyond my control. My goal is to figure out how to pinpoint elements based on their ng-model attributes. For instance, let's t ...

Using Angular 12 to seamlessly import JSON files into TypeScript

My project contains a JSON file located at src/assets/version.json with the following content: {"VERSION":"1.0.0"} I have imported this file into a TypeScript file (e.g., *.ts) as shown below: import * as VersionInfo from 'src/ass ...

Issue with displaying ng-repeat data in AngularJS tbody

I am experiencing an issue with using ng-repeat inside a tbody element. Here is the code snippet that is causing trouble: <tbody> <tr ng-repeat="group in groups"> <td>{{ group.name }}</td> </tr> </tbody> Wh ...

What is the reason for needing to specify event.target as an HTMLInputElement?

I am currently working on a codebase that uses Material Ui with theme overrides. As I set up my SettingContext and SettingsProvider, I find myself facing some syntax that is still unclear to me. Let's take a look at the following code snippet: const ...

Decoding route parameters in AngularJS version 1.0.7

In my app.js, I have a rule that looks like this: $routeProvider.when('/:language/rental-:type-:departure', {templateUrl: 'partials/rental.html', controller: 'itemCtrl'}); If a user enters a URL such as: /en/rental-houses-sa ...

Issue with Angular Checkbox: Inconsistencies in reflection of changes

I'm encountering a challenge with my Angular application where I have implemented multiple checkboxes within an options form. The issue arises when changes made to the checkboxes are not consistently displayed as expected. Below is the pertinent code ...

AngularJS: How to detect the browser's refresh event

Can AngularJS detect when the user clicks the Refresh button on the browser? Is there a built-in method in the framework for developers to access? Thank you ...

Steps for generating war files using gulp

tag in my Angular project, all of the angular files and HTML are stored in the /src/app folder. Additionally, there is a gulp folder responsible for creating the environment settings. I am currently facing the challenge of generating .war files for Apache ...

What could be causing the Typescript error when utilizing useContext in combination with React?

I am currently working on creating a Context using useContext with TypeScript. I have encapsulated a function in a separate file named MovieDetailProvider.tsx and included it as a wrapper in my App.tsx file. import { Context, MovieObject } from '../in ...

Properly configuring paths in react-native for smooth navigation

When working on my React-Native project, I noticed that my import paths look something like this: import { ScreenContainer, SLButton, SLTextInput, } from '../../../../../components'; import { KeyBoardTypes } from '../../../../../enums ...

Tips for selecting multiple rows in Kendogrid without using the select checkbox feature in Angular 5

I'm currently utilizing Kendo UI for Angular 5. Can anyone guide me on selecting multiple rows in a KendoGrid without needing to use the Ctrl key or checkboxes in Angular 5? I know how to select multiple rows using the Ctrl key or checkboxes according ...

Repeated calls to Angular's <img [src]="getImg()"> frequently occur

Can someone help me figure out what's going on here? Recently, I set up a new Angular project and in app.component.html, I have the following code: <img [src]="getDemoImg()"> In app.component.ts: getDemoImg(){ console.log('why so m ...

The AngularJS $rootscope $destroy event is not being triggered, resulting in timeouts not being cancelled

Below is the code snippet that I am currently working with: function initialize() { var defer = $q.defer(); var deferTimer = $q.defer(); var cancelTimeout = $timeout(function() { if (defer !== null) { ctrlr.setProcessingParameters('X ...

The attribute 'status' is not found in the 'ServerResponse' type (TS2339)

I've attempted to develop an interface and install React types, but the only way it seems to work is when I write the code in JavaScript. However, within a TypeScript project, I encounter this error: Property 'status' does not exist on typ ...

Determining changes in an object with Angular 2 and Ionic 2

Q) How can I detect changes in an object with multiple properties bound to form fields without adding blur events to each individual field? I want to avoid cluttering the page with too many event listeners, especially since it's already heavy. For e ...