AngularJS错误：未知提供商：angularFireProvider＆LT; - angularFire [英] AngularJS Error: Unknown provider: angularFireProvider <- angularFire

问题描述

我一直在想一个简单的后端连线到了我的角应用程序，并已经决定使用火力地堡，有过在过去的应用程序与他们良好的体验。

I've been trying to wire up a simple backend to my Angular app and have decided to use Firebase, having had a good experience with them in a past app.

应用程序加载正确火力地堡时，我加载它在浏览器，但我已经通过因缘失败的单元测试碰壁。

The app loads Firebase properly when I load it up in a browser, but I've run into a wall with failing unit tests via karma.

我初始化一个设置屏幕，使您为您的应用程序设置自定义域名指令和一个控制器。

I've initialized a Directive and a Controller for a 'settings' screen that allows you to set a custom domain name for your app.

在最简单的形式，它看起来像这样（的看到完整的源代码）：

In its simplest form, it looks like this (see full source):

settingsController = function($scope, $element, $log, angularFire) {
    var domain = $scope.domain = "";
    var placeholder = $scope.placeholder = "e.g. www.strummer.io";
    console.log(angularFire);
    $scope.log = $log;
};

nav.directive('settings', function() {
    return {
        restrict: 'E',
        transclude: true,
        scope: { domain: '@' },
        controller: settingsController,
        templateUrl: 'static/nav/settings.html',
        replace: true
    };
});

当在浏览器中加载的，我看到了angularFire对象通过的console.log命令显示出来。

When loaded in the browser, I see the angularFire object show up via the console.log command.

然而，当我跑我的测试（通过因果报应/茉莉），我得到了错误：

However, when I run my tests (via karma/jasmine), I am getting the error:

Error: Unknown provider: angularFireProvider <- angularFire
        at Error (<anonymous>)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:2696:15
        at Object.getService [as get] (/Users/dickason/code/strummer/builder/static/lib/angular.js:2824:39)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:2701:45
        at getService (/Users/dickason/code/strummer/builder/static/lib/angular.js:2824:39)
        at invoke (/Users/dickason/code/strummer/builder/static/lib/angular.js:2842:13)
        at Object.instantiate (/Users/dickason/code/strummer/builder/static/lib/angular.js:2874:23)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4759:24
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4338:17
        at forEach (/Users/dickason/code/strummer/builder/static/lib/angular.js:138:20)
    Error: Declaration Location
        at window.jasmine.window.inject.angular.mock.inject (/Users/dickason/code/strummer/builder/static/lib/angular-mocks.js:1744:25)
    at null.<anonymous> (/Users/dickason/code/strummer/builder/static/nav/nav.spec.js:158:13)
    Error: Circular dependency:
        at Error (<anonymous>)
        at getService (/Users/dickason/code/strummer/builder/static/lib/angular.js:2817:17)
        at invoke (/Users/dickason/code/strummer/builder/static/lib/angular.js:2842:13)
        at Object.instantiate (/Users/dickason/code/strummer/builder/static/lib/angular.js:2874:23)
        at /Users/dickason/code/strummer/builder/static/lib/angular.js:4759:24
        at null.<anonymous> (/Users/dickason/code/strummer/builder/static/nav/nav.spec.js:170:20)
        at Object.invoke     (/Users/dickason/code/strummer/builder/static/lib/angular.js:2864:28)
        at workFn (/Users/dickason/code/strummer/builder/static/lib/angular-    mocks.js:1758:20)

下面是有问题的测试设置（的看到完整的源代码）：

Here is the test setup in question (see full source):

describe("directive: settings", function() {
        var scope;

        // Setup DOM
        var html, element, compiled;
        beforeEach(function() {
            html = '' +
            '<settings></settings>' +

            inject(function($compile, $rootScope) {
                scope = $rootScope;
                element = angular.element(html);
                compiled = $compile(element)(scope);
                scope.$digest();
            });
        });


        // Setup Controller
        var ctrl;
        beforeEach(inject(function($controller) {
            ctrl = $controller('settingsController', {$scope: scope, $element: null});
        }));

        it("Should retrieve the domain from the datastore", inject(function($controller, $rootScope) {
            // Test Controller

        }));

一些google搜索后，我怀疑这事做angularFire被注入到控制器的方式。

After some googling, I suspect this has something to do with the way angularFire is being injected into the controller.

我试过了以下解决方案：

I've tried the following solutions:

settingsController.$inject = ['$scope', '$element', '$log', 'angularFire'];

和

settingsController = ['$scope', '$element', '$log', 'angularFire', function($scope, $element, $log, angularFire) { ... }];

两者都具有给我留下了同样的错误。

Both of which have left me with the same error.

任何建议将是AP preciated。

Any suggestions would be appreciated.

推荐答案

通过一些试验和错误理解了它。

Figured it out via some trial and error.

当应用程序被初始化，火力与我的主要模块（'导航'）一起注入。

When the app is initialized, firebase is injected along with my main module ('nav').

当测试被初始化，但是，火力不会被注射的某些原因。通过手动注入它作为一个模块，每次测试前，就能避免'unknownProvider'的错误。

When the tests are initialized, however, firebase doesn't get injected for some reason. By manually injecting it as a module before each test, you can avoid the 'unknownProvider' error.

而不是：

beforeEach(module('nav'));

使用：

beforeEach(module('nav', 'firebase'));

采用这种方法可以让你在注入angularFire在控制器中的每个它（'...'）子句：

it("Should retrieve the domain from the datastore", inject(function($controller, $rootScope, angularFire) {

这篇关于AngularJS错误：未知提供商：angularFireProvider＆LT; - angularFire的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！