AngularJS - Nested views not showing using ui-router

Question

I'm working on upgrading a project I found to the latest version of Angular and preparing it for Angular 2 conversion etc. So, I'm using some nested views in Angular using ui-router , and I can only get the nested views to display if they are explicitly included in the index page as ng-template files.

index.jade

script(type="text/ng-template", id="404")
    include partials/404
script(type="text/ng-template", id="home")
    include partials/home
script(type="text/ng-template", id="private/layout")
    include partials/private/layout
script(type="text/ng-template", id="private/home")
    include partials/private/home
script(type="text/ng-template", id="private/nested")
    include partials/private/nested
script(type="text/ng-template", id="private/nestedAdmin")
    include partials/private/nestedAdmin

app.routes.js

(function() {
  'use strict';

  angular
    .module('app.routes', [
      'ui.router'
    ])

  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {

    var access = routingConfig.accessLevels;

    // Public routes
    $stateProvider
        .state('public', {
            abstract: true,
            template: "<ui-view/>",
            data: {
                access: access.public
            }
        })
            .state('public.home', {
                url: '/',
                templateUrl: 'home'
            })
            .state('public.404', {
                url: '/404',
                templateUrl: '404'
            });

    // Regular user routes
    $stateProvider
        .state('user', {
            abstract: true,
            template: "<ui-view/>",
            data: {
                access: access.user
            }
        })
            .state('user.profile', {
                url: '/profile',
                templateUrl: 'profile',
                controller: 'profileController',
                controllerAs: 'vm'
            })

            .state('user.private', {
                abstract: true,
                url: '/private',
                templateUrl: 'private/layout'
            })
                .state('user.private.home', {
                    url: '/',
                    templateUrl: 'private/home'
                })
                .state('user.private.nested', {
                    url: '/nested',
                    templateUrl: 'private/nested'
                })

                .state('user.private.admin', {
                    url: '/admin',
                    templateUrl: 'private/nestedAdmin',
                    data: {
                        access: access.admin
                    }
                });

  });

})();

I wanted to remove the whole ng-template part as I felt this would not be efficient when scaling the app up, so I removed the ng-template scripts from the index page. When I do this, the first layer of nested routes work, so routes such as public.home work okay. The problem comes with the second layer of nested views, so now routes such as user.private.home and user.private.nested do not work and aren't displayed.

Here is the generated HTML with and without the ng-templates scripts:

WITH ng-templates scripts

<div data-ui-view="" class="col-md-6 col-md-pull-4 ng-scope">
  <p class="ng-scope">Only visible to users</p>
</div>

WITHOUT ng-templates

<div data-ui-view="data-ui-view" class="col-md-6 col-md-pull-4 ng-scope"></div>

Any ideas?

Answer 1

Found my own answer here: https://github.com/angular-ui/ui-router/issues/247

Turns out it's an issue with Jade/ui-router, I'm not sure which. The solution is to either include ui-view using pure HTML <div ui-view></div> or by placing doctype html at the top of your partial file.

It was a confusing issue because the nested templates worked fine when injected into $templateCache using ng-template as shown in my post.