AngularJS routing hijacking non base URLs when page reload is expected

[danielcha]

(Disclaimer: this is a duplicate of my stackoverflow question, but I think this is a bug...)

I'm building an AngularJS app that is not located in the root location domain.tld/blog. I have routing setup for everything on the /blog base. I included the base tag in the head of the page <base href="/blog">. html5Mode is set to true. Within the app everything works as expected. However, when I click a non-angular URL outside of the base location the page isn't loaded. It seems that this location is caught by the otherwise function in the router:

ROUTER.otherwise({
  redirectTo : '/blog'
});

So when I click any url, i.e. domain.tld/somewhere-else it redirects to domain.tld/blog. Obviously this is what you would expect: for every URL that is not found in the router, redirect it to the 'homepage'. In my app this is not the desired behavior. All urls that are not in the router should be treated as a normal url and fire a page reload to that url.

So what I need is something like this:

ROUTER.otherwise(
     window.location = theRequestedUrl;
);

This doesn't work obviously. But somehow I need to get inside the otherwise part of the router and tell it to redirect to page with a page reload.

The following jsFiddle demonstrates the problem http://fiddle.jshell.net/43tub/6/show/light/ . Click on the /outside link should do a full page refresh...

[rdjs]

same issue? #3520

[danielcha]

@rdjs yup same issue, looks like he also used the fiddle you originally made? Although his base tag is / and not /Books

[zivc]

Your problem isn't Angular, it's jsfiddle bastardising your markup.

I properly configured what you have explained above (http://zi.vc/angular/html-link-rewriting/) and it works perfectly.

[danielcha]

@zivc thank you for your reply and example! It indeed seems to be working properly, but this does not explain why it doesn't work on my testserver (which doesn't bastardise my markup). I'll get back to you when I have done some more debugging...

[zivc]

@danielcha few notes, your base is where Angular is running from, so if on mydomain.com you had Angular running from /app/, that would be your base. I think there was confusion at some point, especially on the other thread that the base should have been /Books which isn't the case as this is a route controlled by Angular. Don't forget to put a trailing slash on your base too.

[zivc]

I've recreated your issue above at the same directory level as you have described. http://zi.vc/angularblog/
Working as intended.

[danielcha]

I was the trailing slash that was the problem in combination with History.js: without the trailing slash the angular page worked, but the none-defined routes were not. With the trailing slash, I got all kinds of errors and nothing worked at all, so I assumed (wrongfully) that it should'nt have a trailing slash. The errors I'm getting are due to the fact "History.js Adapter has already been loaded". Which is true, because I include this for library for some other in my main javascript file. I guess this is the sort of bugs you run into when porting an existing website to an Angular app XD

I'm still getting some other errors now, but once I got it all sorted out I will close this issue. So for anyone else having this issue: don't forget the trailing slash, if that doesn't work,. check for jQuery library conflicts like History.js

@zivc thank you very much for helping me this far, will keep you posted!

[danielcha]

So I got everything working (except some unrelated issues...). The issue was the trailing slash that was missing from my base tag. And I did not catch this because using a trailing slash would break the blog app completely. This was due to a complict with the History.js library that Angular uses and I had already included to work with jQuery (I'm porting my existing website to an Angular app).

Now all that is left to do is find out why using ngInclude inside an ngView is causing Error: 10 $digest() iterations reached. Aborting! errors XD, but otherwise it's working just fine.