AngularJS Typescript Error: Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc

Question

我在 AngularJS 中完成了几个项目，但这是我在 Typescript 中完成的第一个项目。我正在使用这个项目作为继续学习 angular 的一种方式，同时也是一种学习 Typescript 的方式，所以我几乎肯定这个错误是由于我不理解的东西而发生的，但我有最难解决问题的时间。我读到的关于这个错误的所有内容都是我在某处打字错误，但我已经检查了很多次，所以我最终决定向你们寻求帮助。不用说，我已经在 Stack Overflow 上浏览了许多类似的问题，但仍然找不到任何可以引导我找到解决方案的东西。

我遇到的错误：

Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc

ItemApp.ts:

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);
}

ItemCtrl.ts:

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) => this.item = data);
        }
    }

    ItemCtrl.$inject = ['$scope', 'itemSvc'];
}

ItemSvc.ts:

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<MainItem> {
            var deferred = this.qService.defer();
            this.httpService.get('/api/item/' + id).then(res => {
                deferred.resolve(res.data);
            }).catch(res => {
                deferred.reject(res);
            });
            return deferred.promise;
        }

         static Factory($http: ng.IHttpService, $q: ng.IQService) {
            return new ItemSvc($http, $q);
        }
    }

    ItemSvc.$inject = ['$http', '$q'];
}

Index.cshtml:

@{
    ViewBag.Title = "List of Items";
}

<div ng-app="ItemApp">
    Item Index
    <div ng-view></div>
</div>

App/Item/Views/ItemList.html:

<div ng-controller="ItemCtrl as ic" >
     Item HTML<br />
     {{ic.testString}}<br />
</div>

路由至少可以正常工作，因为我得到一个 HTML 屏幕显示：

Item Index
Item HTML
{{ic.testString}}

所以控制器没有加载 testString 值，我收到了错误消息。有什么立即跳出来是错误的吗？如果有任何帮助，我将不胜感激！

Answer 1

Angular 的依赖注入区分大小写。在 appModule.factory('ItemSvc', ItemApp.ItemSvc); 和 ItemCtrl.$inject = ['$scope', 'itemSvc'];

之间使用一致的大小写

修复

将appModule.factory('ItemSvc', ItemApp.ItemSvc);更改为appModule.factory('itemSvc', ItemApp.ItemSvc);

AngularJS Typescript Error: Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc

AngularJS Typescript Error: Error: [$injector:unpr] Unknown provider: itemSvcProvider <- itemSvc

angularjs

service

controller

typescript

code-injection

修复