typescript 2.1 with async/await generating ES5/ES3 target for angularjs

Question

I am attempting to use async/await in an angular 1.5.5 project.

Given this service method

    getDocumentTypes(): angular.IPromise<DocumentType[]> {
        var url = "api/document/types";
        this.$log.log(url);
        return this.$http.get(url).then(_ => _.data);
    }

I am attempting to create an async / await version of the method.

    async getDocTypes(): angular.IPromise<DocumentType[]> {
                         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    }}

Intellisense shows an error: TS1055 Type 'angular.IPromise' is not a valid async function return type in ES5/ES3 because it does not refer to a Promise-compatible constructor value.

Is there a correct way to use an angular promise in typescript 2.1 with async / await?

Answer 1

You may need to just use Promise directly:

async getDocTypes(): Promise<DocumentType[]> {

}}

The typescript 2+ generated code, will fall outside of the angular digest cycle, and the component / directive will not update the view / model correctly.

Answer 2

async / await can work in angularjs 1.5

if the $q scheduler is swapped out with Bluebird promises.
By adding the following to app.ts

export class Module {
    app: ng.IModule;

    constructor(name: string, modules: Array<string>) {
        this.app = module(name, modules);
    }
}

function trackDigests(app) {
    app.run(["$rootScope",$rootScope => {
        Promise.setScheduler(cb => {
            $rootScope.$evalAsync(cb);
        });
    }]);
}

export var app: ng.IModule = new Module("app", []).app;
trackDigests(app);

The regular $q scheduler is swapped out. Code like this works out of the box!

async $onInit() {
    this.start();
    try {
        var key = await this.powerService.getKey(this._apiKey.partyAccountNumber);
        var sites = await this.powerService.loadSites(this._apiKey.partyAccountNumber);
        await this.showSummary(sites);
        this.stop(true);
    } catch (error) {
        this.$log.error(error);
        this.stop(false);
    }
}

You can return Promise or ng.IPromse from your service methods, as they are interchangable.

export interface IPowerService {
    setKey(key: pa.PowerApi): ng.IPromise<dm.ClientSite[]>;
    getKey(partyAccountNumber: string): Promise<pa.PowerApi>;
}

By using the above trackDigests in the test harness, unit tests will also work with async / await In my case, I added the following to my webpack.test.js to enable async/await to function the same way with karma tests.

plugins: [
    new webpack.ProvidePlugin({
        Promise: 'bluebird'
    })
],