Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TypeScript + AngularJS v1: Rewriting angular factory to TypeScript

I am wondering how can I rewrite the following factory into a TypeScript code. Here is the original code:

app.factory('errorInterceptor', function ($q) {
    return {
        responseError: function (response) {
            console.error("Error: " + response.statusText);
            return $q.reject(response);
        }
    }
});

So far I've tried the following:

 export class errorInterceptor {
    constructor(private $q:ng.IQService) {

    }

    public responseError(response:any){
        console.error("Error: " + response.statusText);

        return this.$q.reject(response);
    }

    public static getFactory(){
        return  errorInterceptor;
    }
}

app.factory('errorInterceptor',errorInterceptor.getFactory());

But I get the following error:

Provider 'errorInterceptor' must return a value from $get factory method.

Any ideas?

like image 272
uksz Avatar asked Nov 17 '15 14:11

uksz


People also ask

Can you mix AngularJS and angular?

With it you can mix and match AngularJS and Angular components in the same application and have them interoperate seamlessly. That means you don't have to do the upgrade work all at once, since there is a natural coexistence between the two frameworks during the transition period.

Can TypeScript be used with AngularJS?

Guide to using TypeScript in AngularJS applications. Supporting older AngularJS applications doesn't mean you can't take advantage of modern tools like TypeScript. Not every file in your application needs to be written in TypeScript at once, you just can rename all your JavaScript files to have a . ts extension.

Is AngularJS JavaScript or TypeScript?

Angular, also called AngularJS, is a JavaScript framework for building rich web applications.


1 Answers

I use this syntax:

export class errorInterceptor {
    // to support minification
    static $inject = ["$q"];

    constructor(private $q:ng.IQService) {

    }

    public responseError(response:any){
        console.error("Error: " + response.statusText);

        return this.$q.reject(response);
    }

    //public static getFactory(){
    //    return  errorInterceptor;
    //}
}

//app.factory('errorInterceptor',errorInterceptor.getFactory());
app.service('errorInterceptor',errorInterceptor);

EXTEND:

This is the snippet which I use to intercept $http calls (so it does work for me)

module MyModule
{
    var app = angular.module("MyModule");

    export class HttpErrorAspect
    {
        static $inject = ["$q"];

        constructor(private $q: ng.IQService)
        {
        }

        public responseError = (rejection: any): any =>
        {
            // do some magic, e.g. use toaster or alerter
            // to notify about the issue
            ...

            // reject that all
            return this.$q.reject(rejection);
        }
    }

    app.service("HttpErrorFilter", MyModule.HttpErrorAspect);
}
like image 68
Radim Köhler Avatar answered Sep 20 '22 19:09

Radim Köhler