CODEWITHSUNDEEP
angularjs
Danijela
Danijela

Reputation: 41

Error: Unknown provider

I started using Angular and now I am stuck with the following problem...

When I load log-in page, in firebug console I am getting:

Error: Unknown provider: loggerProvider <- logger.....

If anyone can look this very small project angular-seed-master.zip, which can be downloaded from here.

It contains basic log-in, log-out, register functionality.

Somehow, in login.js RootCtrl function, I am not allowed to pass logger as a parameter. I don't know why.

Thank you very much, Danijela

Snippet:

Peace of login.js controller:

function LoginCtrl($scope, $rootScope, $http, logger, messagesService) {    
}

function RootCtrl ($scope, $http, logger, $location) {
...
}

function UnsecureCtrl ($scope) {
...
}

Peace of index.html:

...
<body>
    <div ng-controller="RootCtrl">
    <header>
        <div class="user-panel">
            <div ng-switch on="isLoggedIn">
                <div class="user" ng-cloak ng-switch-when="true">Hello {{email}}!</div>
                <div class="loginout">
                    <button class="btn" ng-cloak ng-switch-when="false" ng-click="loginRoute()">Login</button>              
                    <button class="btn" ng-cloak ng-switch-when="true" ng-click="logout()">Logout</button>
                </div>
            </div>
        </div>
    </header>
    <div class="container-fluid" ng-view ng-animate="{enter: 'view-enter'}"></div>
    <footer>
    </footer>
    </div>
</body>
...

and main.js:

'use strict';

require.config({
    baseUrl:'js',
    paths:{
        jquery: '../lib/jquery/jquery-1.8.2.min',
        angular: '../lib/angular/angular.min',
        toastr: '../lib/toastr.min',
        logger: 'components/logger',
        loginctrl: 'controllers/login',
        securectrl: 'controllers/secure',
        messagesService: 'services/messagesService',
        ngLoginSubmit: 'directives/ngLoginSubmit'
    },
    shim:{
        'angular':{
            exports:'angular'
        },
        'jquery': {
            exports: '$'
        },
        'toastr': {
            deps:['jquery'],
            exports: "toastr"
        },
        'routes': {
            deps:['loginctrl','securectrl']
        },
        'logger': {
            deps:['jquery','angular','toastr']
        },
        'ngLoginSubmit': {
            deps:['angular']
        }
    },
    priority:[
        'angular'
    ]
});

require([
    'angular',
    'jquery',
    'loginctrl',
    'securectrl',    
    'app',
    'toastr',
    'logger',
    'routes',
    'messagesService',
    'ngLoginSubmit'
], function (angular) {
    //After all dependencies are loaded, bootstrap application
    $(document).ready(function () {
        angular.bootstrap(document, ['tableplanner']);
    });
});

and logger.js:

'use strict';
define(['app', 'toastr'], function (app, toastr) {

    app.factory('logger', function () { 
    ...

Upvotes: 2

Views: 1897

Answers (2)

Danijela
Danijela

Reputation: 41

I have removed ng-app attribute from html tag and with this problem was solved.

Upvotes: 1

Cristobal
Cristobal

Reputation: 61

You need to verify that logger was properly injected. Add a snippet to help you, it's better than linking a whole project.

Upvotes: 1

Related Questions