CODEWITHSUNDEEP
angularjsangular-ui-router
ansorensen
ansorensen

Reputation: 1316

AngularJS : UI Router Silently failing

I have a very simple angular ui route structure:

index.html:

<div class="container">
  <div class="header" ui-view="header"></div>

  <div ui-view></div>
</div>

app.config:

   $stateProvider
      .state('app', {
        abstract: true,
        views: {
          'header@': {templateUrl: 'views/header.html', controller: 'HeaderCtrl'}
        }
      })
      .state('app.home', {
        url: '/',
        views: {
          '@': {templateUrl: 'views/main.html', controller: 'MainCtrl'}
        }
      })

However, the above renders nothing, and there are no errors in the console. When I add console.logs to MainCtrl or HeaderCtrl, they don't run. I've added a debugging listeners in the angular 'run' function, from another ui-router silent failure question.

.run(['$rootScope', function($rootScope) {
    $rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
    console.log('$stateChangeStart to '+toState.to+'- fired when the transition begins. toState,toParams : \n',toState, toParams);
  });
  $rootScope.$on('$stateChangeError',function(event, toState, toParams, fromState, fromParams, error){
    console.log('$stateChangeError - fired when an error occurs during transition.');
    console.log(arguments);
  });
  $rootScope.$on('$stateChangeSuccess',function(event, toState, toParams, fromState, fromParams){
    console.log('$stateChangeSuccess to '+toState.name+'- fired once the state transition is complete.');
  });
  // $rootScope.$on('$viewContentLoading',function(event, viewConfig){
  //   // runs on individual scopes, so putting it in "run" doesn't work.
  //   console.log('$viewContentLoading - view begins loading - dom not rendered',viewConfig);
  // });
  $rootScope.$on('$viewContentLoaded',function(event){
    console.log('$viewContentLoaded - fired after dom rendered',event);
  });
  $rootScope.$on('$stateNotFound',function(event, unfoundState, fromState, fromParams){
    console.log('$stateNotFound '+unfoundState.to+'  - fired when a state cannot be found by its name.');
    console.log(unfoundState, fromState, fromParams);
  });

However, the only thing that triggers is the viewContentLoaded (2x). The event object logged gives me no insight into what it thinks it rendered.

I've also double checked that the views/ folder has header.html and main.html, and that views/ is on the same level as index.html (which has <base href="/"> in the head).

I'm at a complete loss. I would expect that I would get some kind of provider error from angular if it couldn't find the controllers, or some 404 error if the path to the .html files was off. Content loaded seems to be firing twice, once for each state view, but the controllers just never run and the HTML never appears.

And yes, I even added some static HTML to the index.html file to make sure that I'm looking at the right page. I am.

Upvotes: 3

Views: 2401

Answers (2)

Dirigible
Dirigible

Reputation: 1968

ui-router always fails silently for some reason if a route is not found. In my case it was because of a trailing slash.

Put a breakpoint at one of these locations to help find the error:

UrlMatcher.prototype.exec = function

if (otherwise) check(otherwise);

Upvotes: 0

Radim K&#246;hler
Radim K&#246;hler

Reputation: 123901

I created working plunker, with the same settings.

As far as I understand, you are using html5mode, so this is added:

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

The rest is the same and working. Hope this could give some insight... some different view...

Upvotes: 2

Related Questions