Problems with deep linking to URL with AngularJS ui-router

Question

I've just encountered a problem which seems to have occurred due to me changing the folder structure of my app (but I think this is a "red herring"). I have a small AngularJS application and to tidy things up I moved one section of functionality to its own folder. I updated all <script> tag references, all view templateUrl values in my $stateProvider section... I don't get an 404 errors, all controllers and views are loaded but I have noticed that in my app I can't directly link to a specific URL (I could before). The URL I wish to directly/deep link to is http://myapp.com/an/membership

When I type this into the browser I get a GET http://myapp.com/an/membership/ 403 (Forbidden) error. The route has 4 child states / urls. I can deep link to all these. To make things worse if I have a link in my app (using ui-sref ) I can link to my state / url with no problems... here is my state / routing code... I have added some comments to explain my problem...

/* This is the parent state of my membership state !! */    
.state('sfm.in', {
  abstract: true,
  url: '/an/',
  templateUrl: '/an/views/member-home/member-home-wrapper.html'
})
/* here the url is http://myapp.com/an/membership - I can link to it using ui-sref but can't deep link, I get a "403 forbidden", everything loads as expected (not sure if I need the abstract). */
      .state('sfm.in.membership', {
        url: 'membership', 
        templateUrl: '/an/membership/views/membership.html',
        controller: 'MembershipCtrl',
        abstract: true
      })
      /* this child state is a default and has the same URL as the parent - http://myapp.com/an/membership*/
      .state('sfm.in.membership.advantages', {
        url: '',
        templateUrl: '/an/membership/views/membership-advantages.html'
      })
      /* No problem with deeplinking - http://myapp.com/an/membership/payment */
      .state('sfm.in.membership.payment', {
        url: '/payment',
        controller: 'MembershipPaymentCtrl',
        templateUrl: '/an/membership/views/membership-payment.html'
      })
      /* No problem with deeplinking http://myapp.com/an/membership/account */
      .state('sfm.in.membership.account', {
        url: '/account',
        controller: 'MembershipAccountCtrl',
        templateUrl: '/an/membership/views/membership-account.html'
      })
      /* No problem with deeplinking http://myapp.com/an/membership/data */
      .state('sfm.in.membership.data', {
        url: 'data',
        controller: 'MembershipDataCtrl',
        templateUrl: '/an/membership/views/membership-data.html'
      });

I have correctly set up the $locationProvider.html5Mode in my app (as I can deeplink, type the url in the browser for other URLS).

Can anyone see a problem here? * UPDATE * I have added the parent state in the routing example, please see my comment from the first answer!

Answer 1

You forgot '/' in your first state:

.state('sfm.in.membership', {
    url: '/membership', 
    templateUrl: '/an/membership/views/membership.html',
    controller: 'MembershipCtrl',
    abstract: true
})

Answer 2

This seems strange but I think the problem was the browser prepending the url when I type it in. I finally changed the code thus... but there is no real change here... I think the browser was the problem. In the meantime I changed the URL but cleaning the history / cache would have also solved the problem.

  .state('sfm.in.membership', {
    abstract: true,
    url: 'member-ship',
    templateUrl: '/an/membership/views/membership.html'
  })
  .state('sfm.in.membership.advantages', {
    url: '',
    templateUrl: '/an/membership/views/membership-advantages.html'
  })
  .state('sfm.in.membership.payment', {
    url: '/payment',
    controller: 'MembershipPaymentCtrl',
    templateUrl: '/an/membership/views/membership-payment.html'
  })
  .state('sfm.in.membership.account', {
    url: '/account',
    controller: 'MembershipAccountCtrl',
    templateUrl: '/an/membership/views/membership-account.html'
  })
  .state('sfm.in.membership.data', {
    url: '/data',
    controller: 'MembershipDataCtrl',
    templateUrl: '/an/membership/views/membership-data.html'
  })