AngularJS 无法实例化模块，是否存在依赖项答案

【问题标题】：AngularJS Failed to instantiate module, were dependency existsAngularJS 无法实例化模块，是否存在依赖项
【发布时间】：2015-11-26 23:34:17
【问题描述】：

我一直在尝试创建一组模块，将用于多个项目。

定义了“wsLang”模块，带有提供者和过滤器。

当尝试在另一个模块中使用它时，我似乎无法访问“wsTranslationProvider”，我不知道为什么！

我已将代码复制到单个 HTML 页面：

<!DOCTYPE html>
<html lang="en" data-ng-app="test">
<head>
    <meta charset="UTF-8">
    <title>Angular App</title>
</head>
<body>

<div data-ng-controller="ctrl1 as vm">
    <p>{{vm.a | wsTranslate}}</p>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-sanitize.min.js"></script>
<script>
angular.module('wsLang', [])
        .provider('wsTranslationProvider', function() {
            this.locale = 'en';
            this.phrases = {};

            this.setLocale = function (locale) {
                if (locale.length < 2) return;
                this.locale = locale;
            };

            this.setPhrases = function (phrases, locale) {
                if (locale === undefined) locale = this.locale;
                this.phrases[locale] = phrases;
            };

            this.addPhrase = function (key, value, locale) {
                if (locale === undefined) locale = this.locale;
                this.phrases[locale][key] = value;
            };

            this.getPhrase = function (key, locale) {
                if (locale === undefined) locale = this.locale;
                if (this.phrases[locale] !== undefined) {
                    if (this.phrases[locale][key] !== undefined) {
                        return this.phrases[locale][key];
                    }
                }
                return key;
            };

            this.$get = function () {
                return this;
            };
        })
        .filter('wsTranslate', ['wsTranslationProvider', function(provider) {
            return function(input) {
                return provider.getPhrase(input);
            };
        }]);

angular.module('test', ['wsLang'])
        .config(function(wsTranslationProvider) {
            wsTranslationProvider.setLocale('en');
            wsTranslationProvider.addPhrase('test', 'Test');

        })
        .controller('ctrl1', function() {
            var vm = this;
            vm.a = 'test';
        });

</script>
</body>
</html>

无论我尝试什么，'wsTranslationProvider' 在其他模块中都无法识别。使用“未知提供者：wsTranslationProvider”不断收到“无法实例化模块”错误。

有什么想法吗？

【问题讨论】：

也许这个页面上的一些东西会有用：docs.angularjs.org/guide/providers

标签： angularjs

【解决方案1】：

定义您的提供程序，名称中不带 Provider 后缀：

angular.module('wsLang', [])
  .provider('wsTranslation', function() {
    ...
  });

出于某种原因（我想稍后进行调查），使用在其他模块中定义的提供程序需要这样做。如果您将提供程序更改为在同一个 test 模块中定义，您的代码也可以工作。

【讨论】：

谢谢，但还是不行，现在只是说“未知提供者：wsTranslation”...
现在真的很奇怪。 plunkr 工作正常。但是当我向它添加“addPhrase”函数时，我再次遇到同样的错误......这里完全混淆了：/
更准确地说，将函数添加到提供程序是可行的，但是在“测试”模块的配置中调用它会导致错误
工作中... addPharse 函数中出现错误导致该错误。谢谢
是的，很明显你的代码有错误。 this.phrases 不包含任何条目。祝你好运！