title: AngularJS Typescript Error: Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc
body: <p>I've done a couple projects in AngularJS but this is the first I've done in Typescript.  I'm using this project as a way to continue learning angular but also as a way to learn Typescript so I'm almost positive this error is occurring due to something I'm not understanding, but I'm having the hardest time figuring out the issue.  Everything I've read about this error is I have a typo somewhere but I've been over it so many times that I finally decided to ask for your folks' help.  Needless to say, I've looked through the numerous similar questions here on Stack Overflow but still couldn't find anything which lead me to the solution.</p>
  
  <p>The error I'm getting:</p>
  
  <pre><code>Error: [$injector:unpr] Unknown provider: itemSvcProvider &lt;- itemSvc
  </code></pre>
  
  <p>ItemApp.ts:</p>
  
  <pre><code>module ItemApp {
      'use strict'
  
      var appModule = angular.module('ItemApp', ['ngRoute']);
      appModule.config(['$routeProvider',
              function ($routeProvider: ng.route.IRouteProvider) {
                  $routeProvider
                      .when('/', {
                          templateUrl: '/App/Item/Views/ItemList.html',
                          controller: ItemCtrl
                      })
                      .otherwise({
                          redirectTo: '/'
                      });
              }
      ]);
      appModule.factory('ItemSvc', ItemApp.ItemSvc);
      appModule.controller('ItemCtrl', ItemApp.ItemCtrl);
  }
  </code></pre>
  
  <p>ItemCtrl.ts:</p>
  
  <pre><code>module ItemApp {
      'use strict'
  
       export class ItemCtrl implements IItemCtrl {
          public id: string;
          public item: MainItem;
          public testString: string;
          private itemSvc: any;
  
          constructor($scope, ItemSvc) {
              this.testString = 'Testing';
              this.itemSvc = ItemSvc;
              this.itemSvc.getItem(this.id).then((data) =&gt; this.item = data);
          }
      }
  
      ItemCtrl.$inject = ['$scope', 'itemSvc'];
  }
  </code></pre>
  
  <p>ItemSvc.ts:</p>
  
  <pre><code>module ItemApp {
      'use strict'
  
      export class ItemSvc {
          httpService: ng.IHttpService;
          qService: ng.IQService;
  
          constructor($http: ng.IHttpService, $q: ng.IQService) {
              this.httpService = $http;
              this.qService = $q;
          }
  
          getItem(id): ng.IPromise&lt;MainItem&gt; {
              var deferred = this.qService.defer();
              this.httpService.get('/api/item/' + id).then(res =&gt; {
                  deferred.resolve(res.data);
              }).catch(res =&gt; {
                  deferred.reject(res);
              });
              return deferred.promise;
          }
  
           static Factory($http: ng.IHttpService, $q: ng.IQService) {
              return new ItemSvc($http, $q);
          }
      }
  
      ItemSvc.$inject = ['$http', '$q'];
  }
  </code></pre>
  
  <p>Index.cshtml:</p>
  
  <pre><code>@{
      ViewBag.Title = "List of Items";
  }
  
  &lt;div ng-app="ItemApp"&gt;
      Item Index
      &lt;div ng-view&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>App/Item/Views/ItemList.html:</p>
  
  <pre><code>&lt;div ng-controller="ItemCtrl as ic" &gt;
       Item HTML&lt;br /&gt;
       {{ic.testString}}&lt;br /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The routing is at least working because I'm getting an HTML screen that shows:</p>
  
  <pre><code>Item Index
  Item HTML
  {{ic.testString}}
  </code></pre>
  
  <p>So the controller isn't loading the testString value and I'm getting the error message.  Anything immediately jump out as wrong?  I'd be incredibly appreciative of any help!</p>