Angularjs and Typescript: Error: [$injector:unpr] Unknown provider

Question

I have a very simple webpage:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <script src="http://code.jquery.com/jquery-latest.js"></script>
    <title></title>
</head>
<body ng-app="nawApp">
   <div ng-controller="StudentUse">
      {{fullname}}
   </div>
   <script src="../Scripts/angular.js"></script>
   <script src="../Scripts/angular-route.js"></script>
   <script src="../Scripts/app.js"></script>
   <script src="StudentUse.js"></script>
   <script src="ServiceHttp.js"></script>
</body>
</html>

And I have my controller StundentUse.

/// <reference path="../scripts/app.ts" />
/// <reference path="ServiceHttp.ts" />
/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="Student.ts" />
module nawApp {
   export interface IStundentScope extends ng.IScope {
      returnData: string;
   }

   export class StudentUse {
      static $inject = ['$scope', 'ServiceHttp'];
      constructor($scope: IStundentScope, private serviceHttp: nawApp.ServiceHttp) {
         $scope.returnData = serviceHttp.hello();

      }
   }
   // StudentUse.$inject = ['$scope', 'ServiceHttp'];
   nawApp.app.controller('StudentUse', StudentUse);
}

I have another file called ServiceHttp.ts, which is used by the upper code. The "ServiceHttp.ts" should be some kind of REST-Interface in the future, but up to now it simply returns a "Hello World" string:

/// <reference path="../scripts/app.ts" />

module nawApp {
   export class ServiceHttp {
      constructor() {}

      hello(): string {
         return "Hello world";
      }
   }
   nawApp.app.controller('ServiceHttp', ServiceHttp);
}

If I launch my webpage, switch to the developer console, I get an error that saiys:

Error: [$injector:unpr] Unknown provider: serviceHttpProvider <- serviceHttp

I did't some investigation, but I cannot see the difference between examples that work and by solution with the error..... :-(

Any tips?

Thank You!

EDIT: This should be somehow the final code of the function in ServiceHttp.ts:

 exampleFunction():string {
         this.http.get(URL).success(function (data, status, headers, config) {
            try {
               return data;
            }
            catch (err) {
               return err;
            }
         }).error(function (data, status, headers, config) {
               return status;
            });
         return "";
      }

I recommend this pattern for services : youtube.com/watch?v=Yis8m3BdnEM&hd=1 — basarat
– basarat, Commented Aug 12, 2014 at 9:10

Avag Sargsyan · Accepted Answer · 2016-10-26 14:14:55Z

1

At first I want to suggest to include angular.d.ts in top

/// <reference path="../scripts/typescript/angular.d.ts" />
/// <reference path="../scripts/app.ts" />
/// <reference path="ServiceHttp.ts" />    
/// <reference path="Student.ts" />

and for service you should create like this

module nawApp {
  export class ServiceHttp {
        private http: ng.IHttpService;
        private q: ng.IQService;
        private log: ng.ILogService;
     constructor($http: ng.IHttpService,$q: ng.IQService,$log: ng.ILogService) {
            this.http = $http;
            this.q = $q;
            this.log = $log;

        }
      exampleFunction(){
        var defer = this.q.defer();



        this.http.get('http://example.com').then(
            (response: ng.IHttpPromiseCallbackArg<any>) => {                   
                    defer.resolve(response);
                }

            },
            (err: ng.IHttpPromiseCallbackArg<any>) => {
                defer.reject(err.data);
            }
        )
        return defer.promise;
      }
    static Factory($http:ng.IHttpService, $q:ng.IQService,$log: ng.ILogService) {
            return new ServiceHttp($http, $q, $log);
        }
  }

}

It's a service example. Then you need register your service into your app like this

nawApp.app.factory('ServiceHttp', nawApp.ServiceHttp.Factory);

somewhere in code, for example in controller, you should inject your service through and in controller function

controller constructor

private ServiceHttp:any;
constructor(ServiceHttp .... // other dependencies){
     this.ServiceHttp = ServiceHttp;
}

in ctrl function

someCtrlFunction(){
  this.ServiceHttp.exampleFunction().then(function(resp){
   // success resolved with your response
  })
}

edited Oct 26, 2016 at 14:14

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 12, 2014 at 6:53

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

publicDisplay Over a year ago

Thank You, but why do I need $q: ng.IQService and $log: ng.ILogService. This is not used after that.

Narek Mamikonyan Over a year ago

its just example for you how to inject dependencies :) if you dont need you can remove them :)

publicDisplay Over a year ago

Thank You. Well I adjusted the code according to Your suggestion - It works :-). As I said I would like to use the service for a HTTP-REST request, so I just need $http. Your testing purposes I just returned the "Hello World" stuff, but now I added the RESt-Stuff, so this.http.get(URL).success...., but it seems that http was not initialized in a correct way. I call exampleFunction() with "serviceHttp.exampleFunction();". That is not the correct way... :-)

publicDisplay Over a year ago

Can You help me with this... I am sorry, but this seems to be a stupid question... I know

Narek Mamikonyan Over a year ago

you mean you want to make in exampleFunction http call and return promise and later in code do something like this serviceHttp.exampleFunction().then(function(){alert('succes')})

|

Collectives™ on Stack Overflow

Angularjs and Typescript: Error: [$injector:unpr] Unknown provider

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related