[Fixed] Angular 2 / 4 / 5 – Set base href dynamically


We have an enterprise app that uses Angular 2 for the client. Each of our customers has their own unique url, ex: https://our.app.com/customer-one and https://our.app.com/customer-two. Currently we are able to set the <base href...> dynamically using document.location. So user hits https://our.app.com/customer-two and <base href...> gets set to /customer-two…perfect!

The problem is if the user is for example at https://our.app.com/customer-two/another-page and they refresh the page or try to hit that url directly, the <base href...> gets set to /customer-two/another-page and the resources can’t be found.

We’ve tried the following to no avail:

<!doctype html>

  <script type='text/javascript'>
    var base = document.location.pathname.split('/')[1];
    document.write('<base href="/' + base + '" />');


Unfortunately we are fresh out of ideas. Any help would be amazing.


Here’s what we ended up doing.

Add this to index.html. It should be the first thing in the <head> section

<base href="/">
  (function() {
    window['_app_base'] = '/' + window.location.pathname.split('/')[1];

Then in the app.module.ts file, add { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' } to the list of providers, like so:

import { NgModule, enableProdMode, provide } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { APP_BASE_HREF, Location } from '@angular/common';

import { AppComponent, routing, appRoutingProviders, environment } from './';

if (environment.production) {

  declarations: [AppComponent],
  imports: [
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
export class AppModule { }

Leave a Reply

(*) Required, Your email will not be published