AngularJS : UI Router Silently failing

Question

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.

score 2 · Accepted Answer · answered Mar 26 '15 at 16:23

2

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...

answered Mar 26 '15 at 16:23

Radim Köhler

122,561
47
239
335

I'm not using html5mode, but your plunker works just fine if I remove that line. The project is created in the context of Yeoman's angular generator, so maybe there's something in else from the generator that's failing... but since there are no errors, I wouldn't know where to start looking. I may just have to start from a new project. – ansorensen Mar 30 '15 at 14:31
What does it mean? Is my answer helpful for you? Or not... I'd remove it if you' like to get another answer... – Radim Köhler Mar 30 '15 at 14:34
It's helpful to know that in theory, my code should work. The next step is figuring out why something else is causing it to fail, in the complete absence of any errors. – ansorensen Mar 30 '15 at 14:36
If you can reproduce your issue, e.g. update my plunker ... I am ready to assist. But .. with info you gave me, I showed that it should work.. – Radim Köhler Mar 30 '15 at 14:37

score 0 · Answer 2 · answered Nov 21 '15 at 17:45

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);

AngularJS : UI Router Silently failing

2 Answers2