angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider: pendingRequestsProvider <- pendingRequests <- $http <- $templateRequest <- $compile

Question

I have looked at every example I could find on the web and have not been able to resolve this one. We are using TypeScript with AngularJs. I continue to get the unknown provider error regardless of the changes we have made. Since it is an httpInterceptor I am tying it in to Application.TS and placing the call in _Layout.cshtml. Thank you for your help!

This is my Application.TS file

/// <reference path='../Typescript/angularjs/angular.d.ts' />
/// <reference path='../Typescript/angular-growl-v2/angular-growl-v2.d.ts' />
/// <reference path="Controllers/PendingRequests.ts" />

module TrainingTrackerAdmin {
    import ILocationProvider = ng.ILocationProvider;
    import ICompileProvider = ng.ICompileProvider;
    import IGrowlProvider = ng.growl.IGrowlProvider;
    import IHttpProvider = ng.IHttpProvider;
    import IPendingRequests = PendingRequests.IPendingRequests;

    var myApp = angular.module('trainingTrackerAdmin', ['ngAnimate', 
'ui.bootstrap', 'ui.tree', 'angular-growl']);

myApp.controller(
  "AppController",
  function ($scope: any, $http: any, pendingRequests: IPendingRequests) {
    $scope.PendingRequests = pendingRequests; 
  }
);
myApp.config([
  '$locationProvider', '$compileProvider', 'growlProvider', '$httpProvider',
      ($location: ILocationProvider, $compile: ICompileProvider, growl: 
IGrowlProvider, $httpProvider: IHttpProvider, pendingRequests: 
IPendingRequests) => {
            $location.html5Mode(true);
            $httpProvider.defaults.cache = false;
          //turn off caching for admin
            $httpProvider.defaults.headers.get = { 'Cache-Control': 'no-
cache', 'Pragma': 'no-cache' }; 
            $compile.debugInfoEnabled(true);
            growl.onlyUniqueMessages(false)
                .globalTimeToLive(5000)
              .globalDisableCountDown(true);

            function interceptHttp($q: any, pendingRequests: 
IPendingRequests) {
              function interceptRequest(config: any) {
                alert('interceptRequest');
                pendingRequests.startRequest();
                return config;
              }

              function interceptRequestError(rejection: any) {
                alert('interceptRequest');
                pendingRequests.startRequest();
                return $q.reject(rejection);
              }

              function interceptResponse(response: any) {
                alert('interceptRequest');
                pendingRequests.endRequest();
                return response;
              }

              function interceptResponseError(response: any) {
                alert('interceptRequest');
                pendingRequests.endRequest();
                return $q.reject(response);
              }

              return {
                request: interceptRequest,
                requestError: interceptRequestError,
                response: interceptResponse,
                responseError: interceptResponseError
              };
            }

            $httpProvider.interceptors.push(interceptHttp);
        }
    ]);
}

and this is the class it is referencing:

module TrainingTrackerAdmin.PendingRequests {

  export interface IPendingRequests {
    startRequest(): void;
    endRequest(): void;
    any: boolean;
    none: boolean;
  }

export class PendingRequests implements ng.IServiceProvider, IPendingRequests 
{
private requests: number;
constructor() {
  this.requests = 0;
}
public startRequest(): void {
  this.requests++;
  console.log(`pendingRequests : ${this.requests}`);
}
public endRequest(): void {
  this.requests--;
  console.log(`pendingRequests : ${this.requests}`);
}
public get any(): boolean {
  console.log(`${this.requests} !== 0 :${this.requests !== 0} `);
  return this.requests !== 0;
}
public get none(): boolean {
  console.log(`${this.requests} === 0 :${this.requests === 0} `);
  return this.requests === 0;
}
$get(): IPendingRequests {
  return this;
}
}
angular.module('trainingTrackerAdmin').provider('PendingRequests', 
PendingRequests)
.config(['PendingRequestsProvider', function (PendingRequests: 
ng.IServiceProvider) {
}]);
}

The html for it is called in _Layout.cshtml like this:`

<div class="loadingBackground"  ng-show="pendingRequests.any">
<div class="loadingCell">
  <p class="loadingImage"> </p>
  <p>
    <strong>Loading</strong>
  </p>
</div>

Answer 1

Your actual provider name is PendingRequests, but you use pendingRequests in controller dependencies. Injector is case sensetive, so you should use pendingRequests as provider name (according to styleguide). Also, your controller dependencies are not minification-safe

----------Update---------

There is another issue:

myApp.config([
  '$locationProvider', '$compileProvider', 'growlProvider', '$httpProvider',
      ($location: ILocationProvider, $compile: ICompileProvider, growl: 
IGrowlProvider, $httpProvider: IHttpProvider, pendingRequests: 
IPendingRequests) => {
............

You can not inject services into .config, only providers. So it must be

myApp.config([
  '$locationProvider', '$compileProvider', 'growlProvider', '$httpProvider', 'pendingRequestsProvider', 
      ($location: ILocationProvider, $compile: ICompileProvider, growl: 
IGrowlProvider, $httpProvider: IHttpProvider, pendingRequestsProvider: 
IPendingRequests) => {
............