Random Random - 1 year ago 324
AngularJS Question

Typescript async/await and angular $q service

New TypeScript async/await feature uses ES6 promises. AngularJS uses $q service promises with slightly different interface. Is there any way to use TypeScript async/await feature with $q service promises?

Answer Source

Finally I used the following workaround:

declare var __awaiter: Function;
(window as any).__awaiter = __awaiter; // set global __awaiter to avoid declaring default __awaiter in other files
async () => { } // dummy async function to generate __awaiter code for current file

angular.module('ts-awaiter', []).run(['$timeout', ($timeout: ng.ITimeoutService) => {
    function wrap(func: Function) {
        return function () {
            func.apply(this, arguments);
            $timeout(() => { }); // run angular digest

    var oldAwaiter = __awaiter;
    (window as any).__awaiter = (thisArg: any, _arguments: any, P: Function, generator: any) => {
        P = function (executor: Function) {
            return new Promise<any>((resolve, reject) => {
                resolve = wrap(resolve);
                reject = wrap(reject);
                executor(resolve, reject);
        return oldAwaiter(thisArg, _arguments, P, generator);

Comliper for Typescript 1.8 generates __awaiter function in every file where await operator is used. I replace it with implementation which passes custom Promise constructor which initiates digest cycle after every resolve and reject call. Here is usage example: https://github.com/llRandom/ts-awaiter

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download