Angular app does not load initial page

Question

In an Angular app that I'm currently developing, the first page call does not cause the correct route template to be loaded (only the menu bar is shown). Only if I click on another link and back to the original, the correct page loads.

Is there any known issue with first page loads or what can I do to debug this one?

A bit of context: I'm using Angularjs (v1.2.0-rc.2) and requirejs (and many more, but they should be irrelevant). I can't provide a minimal working example, as I have no idea what to remove and what now. I also had this problem not occurring for some pages for a while, but now (after some more development on other pages), these exhibit the same behaviour. Any pointer are appreciated...

Update

As requested, an example of the route configuration. They look all fairly similar; some static part and some ids.

mod.config(function ($routeProvider) {
  $routeProvider.when('/some/:id/route/to/somewhere', {
    controller: 'MyController',
    templateUrl: '/template/some.template.html'
  });
});

Update 2

After a bit of stepping through the Angular code, I found that during the initial handling of a new URL in this snippet from angular.js , no handler was registered to the event $locationChangeSuccess .

// update browser
var changeCounter = 0;
$rootScope.$watch(function $locationWatch() {
  var oldUrl = $browser.url();
  var currentReplace = $location.$$replace;

  if (!changeCounter || oldUrl != $location.absUrl()) {
    changeCounter++;
    $rootScope.$evalAsync(function() {
      if ($rootScope.$broadcast('$locationChangeStart', $location.absUrl(), oldUrl).
          defaultPrevented) {
        $location.$$parse(oldUrl);
      } else {
        $browser.url($location.absUrl(), currentReplace);
        afterLocationChange(oldUrl);
      }
    });
  }
  $location.$$replace = false;

  return changeCounter;
});

return $location;

function afterLocationChange(oldUrl) {
  $rootScope.$broadcast('$locationChangeSuccess', $location.absUrl(), oldUrl);
}

Only after the processing of the first page load has happened, in angular-route.js , this line is executed $rootScope.$on('$locationChangeSuccess', updateRoute); (which I believe causes the routing to work and views to display correctly). Every subsequent change of URL works fine... Maybe this is due to the way I initialise angular. I use:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['some', 'more', 'modules', 'ngRoute']);
});

I've also updated to v1.2.5, but with no effect to my problem.

Answer 1

This works as a workaround:

myApp.run(['$route', function($route)  {
  $route.reload();
}]);

Found at https://github.com/angular/angular.js/issues/1213 .

Answer 2

try:

mod.config(['$routeProvider', function ($routeProvider) {
  $routeProvider.when('/some/:id/route/to/somewhere', {
    controller: 'MyController',
    templateUrl: '/template/some.template.html'
  });
  $routeProvider.otherwise({
    // If you don't have any route named '/', this will be the default.
    redirectTo: '/some/route' // or '/some/route/:with/params'
  });
}]);

Answer 3

Another possible workaround

var initApp = function () {
    angular.bootstrap(document.body, ['loginApp']);
    document.body.className += ' ng-app';
}
if ( document.body.className.indexOf('ng-app') == -1 ) {
    initApp();
}

Answer 4

The problem as I understand it is that the router has not been started. I have experienced the same issue. Including $route in app.run is enough to kickstart the router.

app.run(['$rootScope', '$route', function ($rootScope, $route) {
   // Include $route to kick start the router.
}]);