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!

Brendan Green · Accepted Answer · 2021-02-17 23:22:22Z

1

You forgot '/' in your first state:

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

edited Feb 17, 2021 at 23:22

Brendan Green

11.9k5 gold badges47 silver badges82 bronze badges

answered Jan 18, 2016 at 17:00

Coder002

2752 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mike Sav Over a year ago

I originally thought that, however when I do add the forward slash the url 'myapp.com/an/membership' doesn't work, but 'myapp.com/an//membership' does?

Coder002 Over a year ago

where did you declare the state for : /an ??

Mike Sav Over a year ago

I have just updated the example... The "an" route is added!

Coder002 Over a year ago

You must remove the last '/'. Try url: '/an'

Coder002 Over a year ago

With this, It must work: .state('sfm.in', { abstract: true, url: '/an', templateUrl: '/an/views/member-home/member-home-wrapper.html' }) .state('sfm.in.membership', { url: '/membership', templateUrl: '/an/membership/views/membership.html', controller: 'MembershipCtrl', abstract: true }) Always the same error? 403?

Mike Sav · Accepted Answer · 2016-01-19 14:09:59Z

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'
  })

Collectives™ on Stack Overflow

Problems with deep linking to URL with AngularJS ui-router

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related