unknown provider error hoteldatafactory <- hoteldatafactory

Question

I am getting an Error: [$injector:unpr] Unknown provider: hotelDataFactoryProvider <- hotelDataFactory, it seems that that there is a problem somewhere in the dependency injection.

the errors are

Uncaught SyntaxError: Unexpected token : angular.js:14362 Error: [$injector:unpr] Unknown provider: hotelDataFactoryProvider <- hotelDataFactory

at Object.getService [as get] 
at getService 
at injectionArgs 
at Object.instantiate 
at $controller 
at Object.link 
at  <div ng-view="" class="ng-scope">

hotel-data-factory.js

  angular.module('meanhotel')
    .factory('hotelDataFactory', hotelDataFactory);

    function hotelDataFactory($http)
    {
    return
    {
        hotelList: hotelList,
        hotelDisplay : hotelDisplay
    };

    function hotelList() 
    {
    return $http.get('/api/hotels').then(complete).catch(failed);
    }

    function hotelDisplay(id)
    {
    return $http.get('/api/hotels/'+id).then(complete).catch(failed);
    }

    function complete(response)
    {
    return response.data;

    }

    function failed(error)
    {
    return error.statusText;
    }   
    }

app.js

    angular.module('meanhotel',['ngRoute'])
    .config(config);

    function config($routeProvider,$locationProvider)
    {

    $locationProvider.hashPrefix('');

    $routeProvider
    .when('/' ,{
    templateUrl:'angular-app/hotel-list/hotels.html',
    controller:HotelsController,
    controllerAs:'vm'
    })

    .when('/hotel/:id', {   
    templateUrl:'angular-app/hotel-display/hotel.html',
    controller:HotelController,
    controllerAs:'vm'
    });

    }

index.html

    <!DOCTYPE html>

    <!-- test-->
    <html ng-app="meanhotel">
    <head>
      <title>MEAN hotel</title>
      <link href="css/bootstrap.min.css" rel="stylesheet"/>
      <link href="css/custom.css" rel="stylesheet"/>
    </head>
    <body>

    <div ng-view></div>

      <footer class="footer">
        <div class="container">
          <p class="text-muted text-center">
            <a href="http://fullstacktraining.com" target="_blank"><img src="/images/fullstacktraining_logo.png" height="26" alt="Full Stack Training"/></a>
          </p>

          <p class="text-muted text-center">
            <small>&copy; 2015 Full Stack Training Ltd</small>
          </p>
        </div>
      </footer>

      <script src="jquery/jquery-3.1.1.min.js"></script>
      <script src="node_modules/angular/angular.js"></script>
      <script src="node_modules/angular-route/angular-route.js"></script>
      <script src="angular-app/app.js"></script>
      <script src="angular-app/hotel-data-factory/hotel-data-factory.js"></script>
      <script src="angular-app/hotel-list/hotel-list-controller.js"></script>
      <script src="angular-app/hotel-display/hotel-display-controller.js"></script>

    </body>
    </html>

hotel-display.js

    angular.module('meanhotel')
    .controller('HotelController', HotelController);

    function HotelController(hotelDataFactory,$routeParams)
    {
        var vm=this;
        var id=$routeParams.id;

            hotelDataFactory.hotelDisplay(id).then(function(response)
            {
                vm.hotel=response;

            });
    }

hotel-list.js

    angular.module('meanhotel')
    .controller('HotelsController', HotelsController);

    function HotelsController(hotelDataFactory)
    {
    var vm=this;
    vm.title='Mean Hotel app';
    hotelDataFactory.hotelList().then(function(response){

    vm.hotels=response;

    });

    }

make sure that hotel-data-factory.js file is loaded. and show all your console errors — El houcine bougarfaoui

El houcine bougarfaoui El houcine bougarfaoui · Accepted Answer · 2017-03-13T18:20:17

you have to put something after return because it will return undefined:

return {
        hotelList: hotelList,
        hotelDisplay : hotelDisplay
    };

instead of :

 return
    {
        hotelList: hotelList,
        hotelDisplay : hotelDisplay
    };

unknown provider error hoteldatafactory <- hoteldatafactory

1 Answers