Question

我使用下面的代码获得依赖注入错误。我不确定原因，因为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的不同用法存在错误？如果是这种情况，为什么删除我标记的两行会阻止错误出现在控制台中？

我的新用法与其他用户有所不同，但我无法弄清楚它是什么以及如何解决它。我可以看到的唯一区别是其他用法都在控制器中，而我的用法是指令。

错误是：

rosterStateHelper ...未使用显式注释，无法在严格模式下调用

这是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 Minification导致的依赖注入错误而可能发生的潜在错误。启用ng-strict-di时，将不会注入未使用缩小安全方法声明的任何组件，而是会生成此错误。

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

行

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

.factory 'routerStateHelper'依赖于$location，角度需要在运行时找到。由于注入是在运行时提供的，因此TypeScript类型不提供足够的信息来知道它将从何处提供。因此，必须提供其他详细信息，这就是数组符号用于：

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

作为替代方案，您可以在声明中使用变体：

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

是什么导致AngularJS指令中的依赖注入失败？

1 个答案: