Uncaught Error: [$injector:unpr] Unknown provider: storeProvider <- store | Auth0 - AngularJS

Question

I've been trying to implement Auth0 into my NodeJS/AngularJS project (running on Cloud9) following these guidelines: https://auth0.com/docs/client-platforms/angularjs#create-an-application-instance

I also downloaded the sample provided & compaired the code and it all seems the be the same.

Though for some reason I keep getting the same error:

angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider: storeProvider <- store
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=storeProvider%20%3C-%20store(anonymous function) @ angular.js:68
(anonymous function) @ angular.js:4458
getService @ angular.js:4611
(anonymous function) @ angular.js:4463
getService @ angular.js:4611
injectionArgs @ angular.js:4635
invoke @ angular.js:4657
(anonymous function) @ angular.js:4473
forEach @ angular.js:322
createInjector @ angular.js:4473
doBootstrap @ angular.js:1746
bootstrap @ angular.js:1767
angularInit @ angular.js:1652(anonymous function) @ angular.js:30863
trigger @ angular.js:3166
defaultHandlerWrapper @ angular.js:3456
eventHandler @ angular.js:3444

Here's my workspace:

Here's my code:

- app.js

var myApp = angular.module('myApp', 
                        [
                            'ngRoute',
                            'ngResource',
                            'auth0', 
                            'angular-storage',
                            'angular-jwt'
                        ]);

myApp.config(function($routeProvider, authProvider, $httpProvider, $locationProvider,
  jwtInterceptorProvider){

$routeProvider

    .when('/', {
        templateUrl: 'partials/home.html',
        controller: 'homeCtrl'
    })

    .when( '/login', {
        templateUrl: 'partials/login.html',
        controller: 'loginCtrl',
        pageTitle: 'Login'
    })

    .when('/dashboard', {
        templateUrl: 'partials/dashboard.html',
        controller: 'dashCtrl',
        requiresLogin: true
    })

    .when('/capture', {
        templateUrl: 'partials/capture.html',
        controller: 'captureCtrl',
        requiresLogin: true
    })

    .when('/profile', {
        templateUrl: 'partials/profile.html',
        controller: 'profileCtrl',
        requiresLogin: true
    })

    .otherwise({redirectTo: '/'});

    $locationProvider.html5Mode({enabled:true, requireBase: false});

    authProvider.init({
        domain: 'DOMAIN',
        clientID: 'CLIENTID',
        loginUrl: '/login'
    }); 

    authProvider.on('loginSuccess', function($location, profilePromise, idToken, store) {
        console.log("Login Success");
        profilePromise.then(function(profile) {
          store.set('profile', profile);
          store.set('token', idToken);
        });
        $location.path('/');
    });

    authProvider.on('loginFailure', function() {
        alert("Error");
    });

    authProvider.on('authenticated', function($location) {
        console.log("Authenticated");
    });

    jwtInterceptorProvider.tokenGetter = function(store) {
        return store.get('token');
    }

    $httpProvider.interceptors.push('jwtInterceptor');
});

myApp.run(function($rootScope, auth, store, jwtHelper, $location) {
    $rootScope.$on('$locationChangeStart', function() {

        var token = store.get('token');
        if (token) {
            if (!jwtHelper.isTokenExpired(token)) {
                if (!auth.isAuthenticated) {
                    auth.authenticate(store.get('profile'), token);
                }
            } else {
        // Either show the login page or use the refresh token to get a new idToken
            $location.path('/');
            }
        }

    });
});

- homeCtrl.js

/* global myApp*/
myApp.controller('homeCtrl', function($scope, auth, $http, $location, store, $rootScope){
    $scope.auth = auth;

    $scope.logout = function() {
        auth.signout();
        store.remove('profile');
        store.remove('token');
        $location.path('/login');
    }
});

- loginCtrl.js

/* global myApp*/
myApp.controller( 'LoginCtrl', function ($scope, auth, $rootScope) {
    $scope.auth = auth;
});

- index.ejs

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <link rel="icon" href="../../favicon.ico">

    <title>Birdspotter</title>

    <!-- Bootstrap core CSS -->
    <link href="lib/bootstrap/dist/css/bootstrap.css" rel="stylesheet">

    <!-- AngularJS -->
    <script  type="text/javascript" src="lib/angular/angular.js"></script>
    <script  type="text/javascript" src="lib/angular-route/angular-route.js"></script>
    <script  type="text/javascript" src="lib/angular-resource/angular-resource.js"></script>
    <script  type="text/javascript" src="js/app.js"></script>

    <!-- Angular wrapper library for JWT-->
    <script  type="text/javascript" src="lib/angular-jwt/dist/angular-jwt.js"></script>
    <!-- Angular wrapper for localStorage and sessionStorage. Defaults to ng-cookies if not available -->
    <script  type="text/javascript" src="lib/angular-storage/dist/angular-storage.js"></script>
    <!-- Angular cookie wrapper library for client cookies -->
    <script type="text/javascript" src="lib/angular-cookies/angular-cookies.js"></script>

    <!-- Auth0's lock widget library -->
    <script type="text/javascript" src="https://cdn.auth0.com/js/lock-9.0.js"></script>
    <!-- Auth0's Angular SDK Library -->
    <script type="text/javascript" src="https://cdn.auth0.com/w2/auth0-angular-4.js"></script>

    <!-- Controllers -->
    <script  type="text/javascript" src="js/controllers/navCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/homeCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/loginCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/dashCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/captureCtrl.js"></script>
    <script  type="text/javascript" src="js/controllers/profileCtrl.js"></script>

    <!-- Services -->
    <script  type="text/javascript" src="js/services/Api.js"></script>
  </head>

  <body>

    <!-- Navbar -->
    <nav class="navbar navbar-default navbar-default-top" ng-controller="navCtrl">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">Birdspotter</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li ng-class="{active: isActive('/dashboard')}"><a href="/dashboard">Dashboard</a></li>
            <li ng-class="{active: isActive('/capture')}"><a href="/capture">Capture</a></li>
            <li ng-class="{active: isActive('/profile')}"><a href="/profile">Profile</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <!-- Container -->
    <div class="container">
      <div ng-view>

      </div>
    </div>
    <!-- End Container -->

     <!-- Bootstrap core JavaScript -->
     <script src="lib/jquery/dist/jquery.min.js"></script>
     <script src="lib/bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

Any help is much appreciated.

Answer 1

I found the issue:

Wrong script & bower component installed:

angular-storage

and it should've been

a0-angular-storage