publicDisplay publicDisplay - 10 months ago 108
AngularJS Question

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

I have a very simple webpage:

<!DOCTYPE html>
<html xmlns="">
<script src=""></script>
<body ng-app="nawApp">
<div ng-controller="StudentUse">
<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>

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'];'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";
}'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!

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 "";

Answer Source

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;

        var defer = this.q.defer();

            (response: ng.IHttpPromiseCallbackArg<any>) => {                   

            (err: ng.IHttpPromiseCallbackArg<any>) => {
        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'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

   // success resolved with your response