Dynamic runtime baseURL for angular prod builds

index.html

<!-- Replace `<base baseHref="/">` in `index.html` with: -->


<!-- Dynamic base href -->
<base id="baseHref"> <!-- Don't fill baseHref otherwise you'll first get a request with invalid URLs -->
<script>
  document.getElementById('baseHref').href = (function() {
    // NOTE: URI in app module does not need a / suffix. URI in index.html does!
    uri = window.location.pathname;
    uri = uri.replace('index.html', '');
    if (uri.charAt(uri.length-1) !== '/') {
      uri += '/';
    }

    window['__baseurl'] = uri;
    /*
      // __baseurl can be used to communicate to app.module.ts, for example to make /api/ relative to this new baseURL
      providers: [
        {
          provide: MY_BASE_PATH_FOR_API,
          useValue: (function() {
            return window['__baseurl'] + 'api';
          })()
        },
    */
    return uri;
  })();
</script>
<!-- Dynamic base href -->