Angularjs routing template is not displayed

Question

I have the following app.js file:

'use strict';

var app = angular.module('app', [
    'auth0',
    'angular-storage',
    'angular-jwt',
    'ui.router',
    'Environment',
    'Api',
    'Profile'

]);


app.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('main', {
            url: '/main',
            templateUrl: 'js/modules/App/views/frontpage.html'
        })
        .state('login', {
            url: '/login',
            templateUrl: 'js/modules/User/views/login.html',
            controller: 'LoginCtrl'
        });

    $urlRouterProvider
        .otherwise('/main');
}]);


app.config(['authProvider', '$httpProvider', '$locationProvider', 'jwtInterceptorProvider',
    function myAppConfig(authProvider, $httpProvider, $locationProvider, jwtInterceptorProvider) {
        authProvider.init({
            domain: 'marcrasmussen.eu.auth0.com',
            clientID: 'hphpe4JiceMW8FSA02CN7yOYl5fUaULe',
            loginUrl: '/login'
        });

        authProvider.on('loginSuccess', ['$location', 'profilePromise', 'idToken', 'store',
            function ($location, profilePromise, idToken, store) {

                console.log("Login Success");
                profilePromise.then(function (profile) {
                    store.set('profile', profile);
                    store.set('token', idToken);
                });

                $location.path('/');
            }]);

//Called when login fails
        authProvider.on('loginFailure', function () {
            alert("Error");
        });

        //Angular HTTP Interceptor function
        jwtInterceptorProvider.tokenGetter = ['store', function (store) {
            return store.get('token');
        }];
//Push interceptor function to $httpProvider's interceptors
        $httpProvider.interceptors.push('jwtInterceptor');

    }]);

app.run(['auth', function (auth) {
    // This hooks all auth events to check everything as soon as the app starts
    auth.hookEvents();
}]);

And i have the following profile.js file:

angular.module('Profile', [])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('profile', {
            abstract: true,
            url: '/profile'
        })
        .state('profile.index', {
            url: '/index',
            templateUrl: 'js/modules/Profile/views/viewProfile.html'
        })
}]);

in my index.html the files are listed as such:

<script src="js/modules/Profile/lib/profile.js"></script>
<script src="js/modules/App/lib/app.js"></script>
<script src="js/modules/App/directives/login/login.js"></script>

And lastly ofcourse i have my view port:

<div class="main" ui-view>

</div>

As you can tell my application starts on the route /main this works perfectly fine and frontpage.html is being rendered with all the html inside that file.

However when i go to profile.index or /profile/index no error is displayed in the console and no html within the template file js/modules/Profile/views/viewProfile.html is displayed.

Can anyone tell me why this is happening? what am i doing wrong?

Answer 1

I think the issue may be your abstract state. You are not defining a template or templateUrl for this state. Also note that the template for your abstract state must include a ui-view directive in order for its children to populate.

https://github.com/angular-ui/ui-router/wiki/nested-states-%26-nested-views#abstract-state-usage-examples

You may need to do something along the lines of:

    .state('profile', {
        abstract: true,
        url: '/profile',
        template: '<ui-view />
    })