Angular could not resolve from state - angularjs

Question

I used jhipster to generate my app and I tried to add two different types of forms, that would both use same entity (one wouldn't use all fields in entity and other would use all).
Now, it works alright for:
.state('xyz', {
parent: 'entity',
url: '/xyz',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'xyzs'
},
views: {
'content#': {
templateUrl: 'app/entities/xyz/xyzs.html',
controller: 'XyzController',
controllerAs: 'vm'
}
},
resolve: {
}
}).state('xyz.new', {
parent: 'xyz',
url: '/new',
data: {
authorities: ['ROLE_USER']
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/xyz/xyz-dialog.html',
controller: 'XyzDialogController',
controllerAs: 'vm',
backdrop: 'static',
size: 'lg',
resolve: {
entity: function () {
return {
...
};
}
}
}).result.then(function() {
$state.go('xyz', null, { reload: true });
}, function() {
$state.go('xyz');
});
}]
})
And it works alright, but if I change it a small bit and use:
.state('xyz', {
parent: 'entity',
url: '/xyz',
data: {
authorities: ['ROLE_USER'],
pageTitle: 'xyzs'
},
views: {
'content#': {
templateUrl: 'app/entities/xyz/xyzs.html',
controller: 'XyzController',
controllerAs: 'vm'
}
},
resolve: {
}
}).state('a-xyz.new', {
parent: 'xyz',
url: '/a/new',
data: {
authorities: ['ROLE_USER']
},
onEnter: ['$stateParams', '$state', '$uibModal', function($stateParams, $state, $uibModal) {
$uibModal.open({
templateUrl: 'app/entities/xyz/a-xyz-dialog.html',
controller: 'XyzDialogController',
controllerAs: 'vm',
backdrop: 'static',
size: 'lg',
resolve: {
entity: function () {
return {
...
};
}
}
}).result.then(function() {
$state.go('xyz', null, { reload: true });
}, function() {
$state.go('xyz');
});
}]
})
And I've change my
ui-sref="xyz.new"
to
ui-sref="a-xyz.new"
in my html template
I'm getting an error:
Error: Could not resolve 'a-xyz.new' from state 'xyz'
transitionTo#http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:3180:17
go#http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:3108:14
clickHook/</transition<#http://localhost:9000/bower_components/angular-ui-router/release/angular-ui-router.js:4158:9
timeout/timeoutId<#http://localhost:9000/bower_components/angular/angular.js:19157:28
completeOutstandingRequest#http://localhost:9000/bower_components/angular/angular.js:5869:7
Browser/self.defer/timeoutId<#http://localhost:9000/bower_components/angular/angular.js:6145:7

Answer 1

The dot notation is basically used to indicate child state for a parent state. You may refer to this link for better understanding of nested views/states.
Nested Views
Go through this:
Why Parent State must exist
One parent can have multiple child states. So, if your parent state is 'xyz', you can multiple child states as 'xyz.a', 'xyz.b', 'xyz.c' etc.