Angular JS: result of first resolve won't get passed into the second resolve

Question

I'm losing my mind trying to figure out why the following code produces an Unknown Provider error "geonameProvider <- geoname <- country"

var cacRouteViewMod = angular.module('cacRouteViewMod', ['ngRoute', 'cacLib']);

cacRouteViewMod.config(['$routeProvider', function($routeProvider, $routeParams) {
  $routeProvider    
    .when('/countries/:country/capital', {
      templateUrl: 'countries/country.html',
      controller: 'countryDetailCtrl',
      resolve: {
        geoname: ['$route', 'getGeoname', function($route, getGeoname) {
          return getGeoname($route.current.params.country);
        }],
        country: ['getCountry', 'geoname', function(getCountry, geoname) {
          return getCountry(geoname.countryCode);
        }],
        neighbors: ['$route', 'getNeighbors', function($route, getNeighbors) {
          return getNeighbors($route.current.params.country);
        }]
      }
   })
});

I've seen some codes where almost identical code is given as a working example. Like this other stackoverflow post (Angular JS resolve in a resolve). And this article (https://medium.com/opinionated-angularjs/advanced-routing-and-resolves-a2fcbf874a1c).

Why won't mine work?

Answer 1

I believe it's because you are using ngRoute (the native routing module in AngularJS) instead of ui-routeur (the module referred in your articles)

Try using ui-router instead, it should looks like:

.state('countries', {
      url: "/countries/:country/capital", 
      templateUrl: 'countries/country.html',
      controller: 'countryDetailCtrl',
      resolve: {
        geoname: ['$route', 'getGeoname', function($route, getGeoname) {
          return getGeoname($route.current.params.country);
        }],
        country: ['getCountry', 'geoname', function(getCountry, geoname) {
          return getCountry(geoname.countryCode);
        }],
        neighbors: ['$route', 'getNeighbors', function($route, getNeighbors) {
          return getNeighbors($route.current.params.country);
        }]

   })
});

And inject it as a dependency :

var cacRouteViewMod = angular.module('cacRouteViewMod', ['ui-router', 'cacLib']);