angularjs - 是什么导致 AngularJS 指令中的依赖项注入(inject)失败？

Question

我在使用以下代码时遇到依赖项注入(inject)错误。我不确定为什么，因为 rosterStateHelper 在其他文件中工作，包括我从中复制一些代码的文件。

angular.module("HmComponents")
.directive(
    "dhtmlxScheduler", [
        "$rootScope",
        "ModalService",
        "rosterStateHelper",    // <- This line is causing an error
        function (
            $rootScope,
            modal_service,
            rosterStateHelper   // <- This line is causing an error
        ) {

我发现这个问题似乎与我的问题相同:Dependency Injection Strict Mode (ng-strict-di) raises error even when array notation is used但我不明白接受的(也是唯一的)答案。是说 rosterStateHelper 的不同用法有错误吗？如果是这样，为什么删除我标记的两行可以阻止错误出现在控制台中？

我的新用法与其他用法有些不同，但我不知道它是什么以及如何修复它。我能看到的唯一区别是其他用法都在 Controller 中，而我的用法是在指令中。

错误是:

rosterStateHelper ... is not using explicit annotation and cannot be invoked in strict mode

哪个是 https://docs.angularjs.org/error/$injector/strictdi 的更具体版本

At Phil's request, here is the full link using the non-minified library.

InitRosterHelper.ts(请参阅下面的更新版本)

/// <reference path="../../../../../js/lib/typeDefinitions/angular.d.ts" />
/// <reference path="RosterModel.ts" />
/// <reference path="RosterStateHelper.ts" />

import RosterModel = Roster.RosterModel;
import RosterStateHelper = Roster.RosterStateHelper;

angular.module('RosterHelpers', ['ngRoute'])
    .factory('rosterDataModel', ($http) => {
        return new RosterModel($http);
    })
    .factory('rosterStateHelper', ($location) => {
        return new RosterStateHelper($location);
    })
;

RosterStateHelper.ts

/// <reference path="../../../../../js/lib/typeDefinitions/angular.d.ts" />

module Roster {
    import ILocationService = angular.ILocationService;

    export class RosterStateHelper {
        private internalState = {};
        private $location: ILocationService;

        constructor($location) {
            this.$location = $location;
        }

        /**
         * Get the key from internal store
         * @param key
         * @returns {*}
         */
        getInternalState(key) {
            return this.internalState[key];
        }

        /**
         * Save the value for key in internal store.
         * Used to move values between separate controllers
         * @param key
         * @param value
         */
        keepInternalState(key, value) {
            this.internalState[key] = value;
        }

        /**
         * Persist key/values in the page URL.
         * @param key
         * @param value
         */
        keepState(key, value) {
            this.$location.search(key, value);
        }

        /**
         * Retrieve key/values from the page URL
         * @param key
         * @returns {*}
         */
        getState(key) {
            let state = this.$location.search();
            if (state[key] === 'false') {
                return false;
            }
            return state[key];
        }
    }
}

更新了 InitRosterHelper.ts - 仍然是同样的错误:

/// <reference path="../../../../../js/lib/typeDefinitions/angular.d.ts" />
/// <reference path="RosterModel.ts" />
/// <reference path="RosterStateHelper.ts" />

import IHttpService = angular.IHttpService;
import ILocationService = angular.ILocationService;
import RosterModel = Roster.RosterModel;
import RosterStateHelper = Roster.RosterStateHelper;

angular.module('RosterHelpers', ['ngRoute'])
    .factory('rosterDataModel', ($http: IHttpService) => {
        return new RosterModel($http);
    })
    .factory('rosterStateHelper', ($location: ILocationService) => {
        return new RosterStateHelper($location);
    })
;

Answer 1

此问题源于可选的 ng-strict-di 注释。 ng-strict-di 可以添加到 HTML 中的 ng-app 元素，以捕获由于 JavaScript 缩小引起的依赖注入(inject)错误而可能发生的潜在错误。当启用 ng-strict-di 时，任何未使用缩小安全方法声明的组件都不会被注入(inject)，而是会生成此错误。

在您的具体情况下，我们正在处理这条线

.factory('rosterStateHelper', ($location) => { 

.factory 'routerStateHelper' 依赖于 $location，angular 需要在运行时找到它。由于注入(inject)是在运行时提供的，因此 TypeScript 类型无法提供足够的信息来了解从何处提供注入(inject)。因此，必须提供额外的细节，这就是数组符号的用途:

.factory('rosterStateHelper',['location', ($location) => {

作为替代方案，您可以使用声明的变体:

.factory('rosterStateHelper', ($location) => {
    var helper = new RosterStateHelper($location);
    helper.$inject = [$location];
    return helper;
})