ui-router nested states over two levels

Question

I'm trying to nest states over two levels but i get the following error:

Error: Could not resolve 'purchases.inventory.create-move' from state 'purchases.inventory'

Here are the first and second level routes:

(function () {
    'use strict';

    angular.module( 'app.purchases' )

        // Collect the ui-route states
        .constant( 'states', getRouteStates() )

        // Configure the ui-route states and state resolvers
        .config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );

    function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {

        states.forEach( function ( state ) {

            $stateProvider.state( state.name, state.config );

        } );

        $urlRouterProvider.otherwise( "/" );

    }

    // Define the ui-route states
    function getRouteStates() {
        return [
            {
                name: 'purchases',
                config: {
                    url: '/compras',
                    views: {
                        'content-body': {
                            templateUrl: './modules/purchases/purchases-dashboard.view.html',
                            controller: 'PurchasesDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Compras'
                    }
                }
            },
            {
                name: 'purchases.inventory',
                config: {
                    url: '/movimientos',
                    views: {
                        'panel-body': {
                            templateUrl: './modules/purchases/inventory/inventory-dashboard-options.view.html',
                            controller: 'InventoryDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Inventario'
                    }
                }
            },
            {
                name: 'purchases.products',
                config: {
                    url: '/productos',
                    views: {
                        'panel-body': {
                            templateUrl: './modules/purchases/products/products-dashboard-options.view.html',
                            controller: 'ProductsDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Productos'
                    }
                }
            },
            {
                name: 'purchases.suppliers',
                config: {
                    url: '/proveedores',
                    views: {
                        'content-body': {
                            templateUrl: './modules/purchases/suppliers/suppliers-dashboard-options.view.html',
                            controller: 'SuppliersDashboardController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Proveedores'
                    }
                }
            }
        ];
    }

})();

Here are the third level routes (These aren't working):

(function () {
    'use strict';

    angular.module( 'app.purchases.inventory' )

        // Collect the ui-route states
        .constant( 'states', getRouteStates() )

        // Configure the ui-route states and state resolvers
        .config( [ '$stateProvider', '$urlRouterProvider', 'states', stateConfigurator ] );

    function stateConfigurator( $stateProvider, $urlRouterProvider, states ) {

        states.forEach( function ( state ) {

            $stateProvider.state( state.name, state.config );

        } );

        $urlRouterProvider.otherwise( '/' );

    }

    // Define the ui-route states
    function getRouteStates() {
        return [
            {
                name: 'pruchases.inventory.create-move',
                config: {
                    url: '/nuevo-movimiento',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/create-move/create-move.view.html',
                            controller: 'CreateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Nuevo Movimiento'
                    }
                }
            },
            {
                name: 'pruchases.inventory.list-moves',
                config: {
                    url: '/movimientos',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/list-moves.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Lista de Movimientos'
                    }
                }
            },
            {
                name: 'pruchases.inventory.detail-move',
                config: {
                    url: '/movimientos/:move_id/:move_date',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/detail-move.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Detalle'
                    }
                }
            },
            {
                name: 'pruchases.inventory.update-move',
                config: {
                    url: '/movimientos/:move_id/:move_date/actualizar',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/update-move/update-move.view.html',
                            controller: 'UpdateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Actualizacion'
                    }
                }
            }
        ];
    }

})();

In the template what i do is:

<a ui-sref="pruchases.inventory.create-move">Create Move</a>

Is that ui-router doesn't support over two level nested routes?

Answer 1

I just mispelled the state name, here are the corrected states:

function getRouteStates() {
        return [
            {
                name: 'purchases.inventory.create-move',
                config: {
                    url: '/nuevo-movimiento',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/create-move/create-move.view.html',
                            controller: 'CreateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Nuevo Movimiento'
                    }
                }
            },
            {
                name: 'purchases.inventory.list-moves',
                config: {
                    url: '/movimientos',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/list-moves.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Lista de Movimientos'
                    }
                }
            },
            {
                name: 'purchases.inventory.detail-move',
                config: {
                    url: '/movimientos/:move_id/:move_date',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/read-moves/detail-move.view.html',
                            controller: 'ReadMovesController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Detalle'
                    }
                }
            },
            {
                name: 'purchases.inventory.update-move',
                config: {
                    url: '/movimientos/:move_id/:move_date/actualizar',
                    views: {
                        'panel-body@': {
                            templateUrl: './modules/purchases/inventory/update-move/update-move.view.html',
                            controller: 'UpdateMoveController',
                            controllerAs: 'vm'
                        }
                    },
                    ncyBreadcrumb: {
                        label: 'Actualizacion'
                    }
                }
            }
        ];
    }