CODEWITHSUNDEEP
javascriptangularjstypescript
Valerio
Valerio

Reputation: 3615

Angularjs + strictdi error on http interceptor (typescript)

I'm writing a simple Angularjs test app using Typescript. I'm also enforcing ng-strict-di for minification purposes.

I created a simple app.ts file:

declare var angular: ng.IAngularStatic;
module Application {
"use strict";

export var app: ng.IModule = angular.module("Private", ["ngRoute"]);

app.config(($httpProvider: ng.IHttpProvider) => {
    $httpProvider.interceptors.push(Common.Services.HttpInterceptor.Factory);
});

app.config(["$routeProvider", ($routeProvider: ng.route.IRouteProvider) => {
        $routeProvider.when("/home", { templateUrl: "home.html" }); 
        $routeProvider.otherwise({ redirectTo: "/" });
    }]);
}

As you can see, the HTTP Interceptor is pushing

Common.Services.HttpInterceptor.Factory

which is composed as is:

module Common.Services {
    export class HttpInterceptor {
        public static Factory($http: ng.IHttpService) {
            return new HttpInterceptor($http);
        }

        static $inject = ["$http"];
            constructor($http: ng.IHttpService) {
        }

        public response = ((response) => { return response  })

        public responseError = ((rejection) => {
            return rejection;
        });
    }
}

Simple as you see. But every time I hit the home i got this error:

Error: [$injector:strictdi] function($http) is not using explicit annotation and cannot be invoked in strict mode http://errors.angularjs.org/1.4.9/$injector/strictdi?p0=function(%24http)

But I inject the $http when 

static $inject = ["$http"];

I don't know how to fix this.

If this can be of any help, following the compiled js:

var Application;
(function (Application) {
    "use strict";
    Application.app = angular.module("Private", ["ngRoute"]);

    Application.app.config(["$httpProvider", function ($httpProvider) {
        $httpProvider.interceptors.push(Common.Services.HttpInterceptor.Factory);
    }]);
    Application.app.config(["$routeProvider", function ($routeProvider) {            
            $routeProvider.when("/home", { templateUrl: "home.html" });
            $routeProvider.otherwise({ redirectTo: "/" });
        }]);
})(Application || (Application = {}));

var Common;
(function (Common) {
    var Services;
    (function (Services) {
        var HttpInterceptor = (function () {
            function HttpInterceptor($http) {
                this.response = (function (response) { return response; });
                this.responseError = (function (rejection) {
                    return rejection;
                });
            }
            HttpInterceptor.Factory = function ($http) {
                return new HttpInterceptor($http);
            };
            HttpInterceptor.$inject = ["$http"];
            return HttpInterceptor;
        })();
        Services.HttpInterceptor = HttpInterceptor;
    })(Services = Common.Services || (Common.Services = {}));
})(Common || (Common = {}));

Thanks for any help! V.

Upvotes: 3

Views: 687

Answers (1)

nuclearglow
nuclearglow

Reputation: 76

Below the class HttpInterceptor also inject the Factory method:

HttpInterceptor.Factory.$inject = ['$http'];

Upvotes: 2

Related Questions