<base> Tag Breaks Path Resolve about core

[telekid]

@schlesiger setting <base> causes otherwise() to trigger on each transition for me as well. In my case, I could work around the issue by simply setting the URL of my root state to my desired <base> url (e.g. { url: '/theapp', name: 'app' } and removing <base> altogether. Not sure if this is recommended practice, and obviously won't work in all cases, but seems to work for me.

[wallzero]

Thanks @telekid for replying! I am glad to know I am not the only one. Your solution is definitely another option in most cases. However, my project is a React component built on top of ui-router/react with prepopulated routes - including otherwise(). While it may be possible for users to override the already defined otherwise(), it's an added complexity. The whole point of my component is to alleviate much of the typical boilerplate when starting with a navigable UI. My hacky otherwise() logic still works and I'll stick with that for now.

The real solution to fix the bug where otherwise() is called on every transition when <base> is set.

[wallzero]

I'm still not sure why state transition is always triggering otherwise() when the <base> tag is included. For now, I tried to resolve the state myself inside otherwise(). After some trial and error, it also appears _baseHref is included in the url resolution and fails. If I remove the _baseHref, for example. '/ui-router-react-digest/taba', the path is resolved correctly. Here's what I ended up with:

const baseHref = document.getElementsByTagName('base')[0] ?
  document.getElementsByTagName('base')[0].href.replace(/^.*\/\/[^/]+/, '') :
  '/';

router.urlRouter.otherwise((found, route) => {
  const resolve = router.stateService.get().filter((state) => {
    return state.$$state().url &&
      state.$$state().url.exec(route.path.replace(baseHref, ''));
  })[0];

  return {
    state: resolve && !resolve.abstract ? resolve.name : shortName + '.tabs.' + tabs[0].name
  };
});

I actually have to retrieve the <base> href myself because _baseHref isn't populated when otherwise() is first called. Also, back button also calls otherwise() triggering state and clearing any forward history.

Another note: if <base> is used without href, such as <base target="_blank">, instead of href remaining undefined, Chrome and Firefox seem to set href to whatever the initial URL is. This seems pretty dangerous for HTML5 apps; since even if say otherwise() resolved to a correct state, href would always be incorrect. It should be noted somewhere that if <base> is used, href must be set; perhaps here? Maybe it's common knowledge, or it's an unlikely scenario, but it definitely cost me time.

[christopherthielen]

Please try again with @uirouter/[email protected]

[wallzero]

Looks good! I removed my previous additional logic to otherwise() and everything is working:
https://wallzero.gitlab.io/ui-router-react-digest

Thanks!