SayusiAndo SayusiAndo - 5 months ago 49
AngularJS Question

Why ui-route cannot resolve state1 from state2?

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

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.