Why ui-route cannot resolve state1 from state2?

Question

I have an application having two views (lefthandmenu and content), and it has modules too. When user selects the module from a combo-list then $state.go() will be invoked with the selected module name and the views should be populated accordingly. Code samples below.

I use Angular 1.5, ui-router and typescript.

The app throws the error below when I select a module from the combolist.

Error: Could not resolve 'BFTS' from state 'home'

I don't know why.

What I did so far to get over this issue:

• checked whether the params will be passed through properly at the combobox. It is working fine.

• I have checked a lot of questions here and the documentation. I cannot see any difference in my code compared to the accepted answers.

The strange is that, when the application is loaded the 'home' state is active, because I can see the "home module" and "home content" texts where I expect them.

Controller where the user can select the module.

module qa.gonogo {

    "use strict";

    export interface IHeaderComponentController {

    }


    export class HeaderComponentController implements IHeaderComponentController {

        public modules = <IGoNoGoModule[]>[
            {
                name: "BFTS",
                default: 1
            },
            {
                name: "Test Execution",
                default: 0
            },
            {
                name: "Data Analyzer",
                default: 0
            },
            {
                name: "Data Generator",
                default: 0
            },
            {
                name: "Build track",
                default: 0
            },

        ];
        public selectedModule = undefined;

        static $inject = ["moveToStateService"];

        constructor(
            private moveToStateService: IMoveToStateService
        ) { }

        public $onInit = (): void => {

        }

        public moduleSelected(goNoGoModule: IGoNoGoModule): void {
            console.log('selected: ', goNoGoModule);

            if (goNoGoModule === null || typeof goNoGoModule === 'undefined') {
                throw "Desired state name cannot be empty or null! " + goNoGoModule;
            }

            this.moveToStateService.moveToState(goNoGoModule.name);
        }

    }

    angular
        .module("goNoGo")
        .controller("headerComponentController", qa.gonogo.HeaderComponentController);

}

States:

((): void => {

    "use strict";

    angular
        .module("goNoGo")
        .config(config);

    config.$inject = ["$stateProvider", "$urlRouterProvider"];

    function config(
        $stateProvider: ng.ui.IStateProvider,
        $urlRouterProvider: ng.ui.IUrlRouterProvider
    ) {

        $urlRouterProvider.otherwise("/");

        $stateProvider

            .state("home",
            <ng.ui.IState>{
                url: "/",
                views: <any>{
                    "leftHandMenu": <ng.ui.IState>{
                        template: "home module"
                    },
                    "content": <ng.ui.IState>{
                        template: "home content"
                    }
                }
            })

            .state("bfts",
            <ng.ui.IState>{
                url: "/bfts",
                views: <any>{
                    "leftHandMenu": <ng.ui.IState>{
                        template: "bfts module"
                    },
                    "content": <ng.ui.IState>{
                        template: "bfts content"
                    }
                }
            })
    }

})();

service where the state will be changed:

module qa.gonogo {

    "use strict";

    export interface IMoveToStateService {
        moveToState(stateName: string): void;
    }

    class MoveToStateService implements IMoveToStateService {

        constructor(
            private $state: ng.ui.IStateService ) {

        }

        moveToState(stateName: string): void {
            console.log("state service:", stateName);
            this.$state.go(stateName, <any>{});
        }
    }

    factory.$inject = ["$state"];

    function factory(
        $state: ng.ui.IStateService
    ) {
        return new MoveToStateService($state);
    }

    angular
        .module("goNoGo")
        .factory("moveToStateService", factory);

}

Answer 1

As i wrote in the comment - You defined the state like

.state("bfts",

So

<a ui-sref="BFTS">

Will not work because ui-routed can't identify a state matching to that name. But <a ui-sref="bfts"> will work.