[angular] 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.

This question is related to angular

The answer is

The marked answer here did not solve my issue, possibly different angular versions. I was able to achieve the desired outcome with the following angular cli command in terminal / shell:

ng build --base-href /myUrl/

ng build --bh /myUrl/ or ng build --prod --bh /myUrl/

This changes the <base href="/"> to <base href="/myUrl/"> in the built version only which was perfect for our change in environment between development and production. The best part was no code base requires changing using this method.

To summarise, leave your index.html base href as: <base href="/"> then run ng build --bh ./ with angular cli to make it a relative path, or replace the ./ with whatever you require.


As the example above shows how to do it from command line, here is how to add it to your angular.json configuration file.

This will be used for all ng serving for local development

"architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "baseHref": "/testurl/",

This is the config specific for configuration builds such as prod:

"configurations": {
   "Prod": {
     "fileReplacements": [
          "replace": src/environments/environment.ts",
          "with": src/environments/environment.prod.ts"
      "baseHref": "./productionurl/",

The official angular-cli documentation referring to usage.

Based on your (@sharpmachine) answer, I was able to further refactor it a little, so that we don't have to hack out a function in index.html.

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

import { AppComponent } from './';
import { getBaseLocation } from './shared/common-functions.util';

  declarations: [AppComponent],
  imports: [
  bootstrap: [AppComponent],
  providers: [
        provide: APP_BASE_HREF,
        useFactory: getBaseLocation
export class AppModule { }

And, ./shared/common-functions.util.ts contains:

export function getBaseLocation() {
    let paths: string[] = location.pathname.split('/').splice(1, 1);
    let basePath: string = (paths && paths[0]) || 'my-account'; // Default: my-account
    return '/' + basePath;

I use the current working directory ./ when building several apps off the same domain:

<base href="./">

On a side note, I use .htaccess to assist with my routing on page reload:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule .* index.html [L]

Simplification of the existing answer by @sharpmachine.

import { APP_BASE_HREF } from '@angular/common';
import { NgModule } from '@angular/core';

    providers: [
            provide: APP_BASE_HREF,
            useValue: '/' + (window.location.pathname.split('/')[1] || '')

export class AppModule { }

You do not have to specify a base tag in your index.html, if you are providing value for APP_BASE_HREF opaque token.

This work fine for me in prod environment

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

In angular4, you can also configure the baseHref in .angular-cli.json apps.

in .angular-cli.json

{   ....
 "apps": [
            "name": "myapp1"
            "baseHref" : "MY_APP_BASE_HREF_1"
            "name": "myapp2"
            "baseHref" : "MY_APP_BASE_HREF_2"

this will update base href in index.html to MY_APP_BASE_HREF_1

ng build --app myapp1

If you are using Angular CLI 6, you can use the deployUrl/baseHref options in angular.json (projects > xxx > architect > build > configurations > production). In this way, you can easily specify the baseUrl per project.

Check that your settings are correct by looking at the index.html of the built app.

Add-ons:If you want for eg: /users as application base for router and /public as base for assets use

$ ng build -prod --base-href /users --deploy-url /public

Had a similar problem, actually I ended up in probing the existence of some file within my web.

probePath would be the relative URL to the file you want to check for (kind of a marker if you're now at the correct location), e.g. 'assets/images/thisImageAlwaysExists.png'

<script type='text/javascript'>
  function configExists(url) {
    var req = new XMLHttpRequest();
    req.open('GET', url, false); 
    return req.status==200;

  var probePath = '...(some file that must exist)...';
  var origin = document.location.origin;
  var pathSegments = document.location.pathname.split('/');

  var basePath = '/'
  var configFound = false;
  for (var i = 0; i < pathSegments.length; i++) {
    var segment = pathSegments[i];
    if (segment.length > 0) {
      basePath = basePath + segment + '/';
    var fullPath = origin + basePath + probePath;
    configFound = configExists(fullPath);
    if (configFound) {

  document.write("<base href='" + (configFound ? basePath : '/') + "' />");

In package.json set flag --base-href to relative path:

"script": {
    "build": "ng build --base-href ./"

Frankly speaking, your case works fine for me!

I'm using Angular 5.

<script type='text/javascript'>
    var base = window.location.href.substring(0, window.location.href.toLowerCase().indexOf('index.aspx'))
    document.write('<base href="' + base + '" />');

I just changed:

  <base href="/">

to this:

  <base href="/something.html/">

don't forget ending with /

Questions with angular tag:

error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class error TS1086: An accessor cannot be declared in an ambient context in Angular 9 TS1086: An accessor cannot be declared in ambient context @angular/material/index.d.ts' is not a module Why powershell does not run Angular commands? error: This is probably not a problem with npm. There is likely additional logging output above Angular @ViewChild() error: Expected 2 arguments, but got 1 Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class' Access blocked by CORS policy: Response to preflight request doesn't pass access control check origin 'http://localhost:4200' has been blocked by CORS policy in Angular7 How to set value to form control in Reactive Forms in Angular Typescript: Type X is missing the following properties from type Y length, pop, push, concat, and 26 more. [2740] WARNING in budgets, maximum exceeded for initial ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.2.0 but 3.2.1 was found instead Angular CLI Error: The serve command requires to be run in an Angular project, but a project definition could not be found How to set width of mat-table column in angular? How to reload current page? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How to convert string to boolean in typescript Angular 4 Angular: How to download a file from HttpClient? Confirm password validation in Angular 6 Angular 6: saving data to local storage How to use mouseover and mouseout in Angular 6 get current date with 'yyyy-MM-dd' format in Angular 4 Sort Array of object by object field in Angular 6 Setting values of input fields with Angular 6 Select default option value from typescript angular 6 Angular 6: How to set response type as text while making http call Set default option in mat-select How to do a timer in Angular 5 Can not find module “@angular-devkit/build-angular” Could not find module "@angular-devkit/build-angular" How to remove package using Angular CLI? How to add bootstrap in angular 6 project? Can't bind to 'dataSource' since it isn't a known property of 'table' Angular 6 Material mat-select change method removed How to set environment via `ng serve` in Angular 6 Angular 5 Button Submit On Enter Key Press ERROR Error: StaticInjectorError(AppModule)[UserformService -> HttpClient]: Set focus on <input> element How to import a new font into a project - Angular 5 Angular - "has no exported member 'Observable'" Uncaught (in promise): Error: StaticInjectorError(AppModule)[options] Property '...' has no initializer and is not definitely assigned in the constructor Angular 5 ngHide ngShow [hidden] not working What could cause an error related to npm not being able to find a file? No contents in my node_modules subfolder. Why is that? Angular - How to apply [ngStyle] conditions How to remove whitespace from a string in typescript? Angular 5 - Copy to clipboard