Angular State Provider throws cannot resolve State Error

Question

I am very new to Angular and I am just working on an existing application where they are using state engine. I added a new state

'app.maintenance.population.trial'

in an existing module which looks like following:

var maintenancePopulationModule = angular.module('maintenance.population.module', ['fileUpload.module'])
.config([
    '$stateProvider', function ($stateProvider) {
        $stateProvider
            .state('app.maintenance.population',
            {
                url: '/population',
                templateUrl: '/app/maintenance/population/maintenance.population.view.html',
                controller: 'MaintenancePopulationController',
                authorize: true
            })
         .state('app.maintenance.population.trial',
                {
                    url: '/trial2',
                    templateUrl: '/app/maintenance/population/maintenance.population.view.html',
                    //controller: 'MaintenanceCodisController',
                    //authorize: true
                });

    }
]);

• As we can see, there is hardly any difference between two states. It uses the same template and added extra keyword '.trial' at the end and it stopped working. Now I did a different experiment and this time I meddled with another Module with a similar experiment:

angular.module('maintenance.codis.module', [])
        .config([
            '$stateProvider', function($stateProvider) {
                $stateProvider
                    .state('app.maintenance.codis',
                    {
                        url: '/codis',
                        templateUrl: '/app/maintenance/codis/maintenance.codis.view.html',
                        controller: 'MaintenanceCodisController',
                        authorize: true
                    })
                .state('app.maintenance.codis.trial',
                    {
                        url: '/trial',
                        templateUrl: '/app/maintenance/codis/maintenance.codis.view.html',
                        //controller: 'MaintenanceCodisController',
                        //authorize: true
                    });

            }
        ]);

• This one works. As you can see I there is not much difference between the states except .trial keyword at the end for these two as well. Not sure why Codis works but the population does not work. Any ideas?

Answer 1

Suggesting you to have a look about Nested States

Clearly see that app.maintenance.codis is your parent state, and app.maintenance.codis.trial is your child state.

Your Route to trial will be like this

...../codis/trial

This means that your trial state is a child of codis. Also to check if population trial2 is working or not try accessing this Route

......./population/trial2

This must work as expected.

FINALLY, To make your codis working. Ensure that there must be ui-view in the Codis html template also your both states refers to same templateUrl, modify it accordingly.

Is this answer helpful! Comment if any further explanation needed.