181

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>
<html>

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

...

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

Improve this question
9
  • 1
    Have you attempted anything with APP_BASE_HREF? I am not quite sure how it would be implemented, but it seems to be something that would be useful... Commented Jun 30, 2016 at 2:50
  • Of course it definitely depends on which version of the router you are currently using as well. Are you on the router version 3.0.0-alpha.x? Commented Jun 30, 2016 at 2:59
  • I'm using "@angular/router": "3.0.0-alpha.7" Commented Jun 30, 2016 at 3:02
  • 13
    Angular 7 - November 2018. this is still an issue. current answers provide a partial solution. doing stuff inside angular module is too late. as your index HTML is served it needs to know where to pull the scripts from. there are only 2 ways the way I see it - using asp\php\whatever to serve index.html with dynamic basehref content. or using native javascript right on the index.html file to change DOM content before it gets to angular. both are poor solutions to a common problem. sad. Commented Nov 8, 2018 at 14:16
  • 1
    Can someone please answer my query also. stackoverflow.com/questions/53757931/… Commented Jan 2, 2019 at 11:01

17 Answers 17

Reset to default
217

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.

Update:

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

9 Comments

This solution requires a build per customer, which is probably not solving the OP's problem.
@MaximeMorin in my experience so far doing this, ./ works for all locations. So actually I don't think you have to build per client.
@Zze My experience with ./ has been very different. It works until the user navigates to a route and hit the browser's refresh button or keys. At that point, our rewrites handle the call, serves the index page, but the browser assumes that ./ is the current route not the web app's root folder. We solved the OP's issue with a dynamic (.aspx, .php, .jsp, etc) index which sets the base href.
Using --prod during the build will not change your base href value, you shouldn't talk about it here. --prod tells angular-cli to use the environment.prod.ts file instead of the default file environment.ts in your environments folder
Angular 7.1: Unknown option: '--bh'. --base-href works.
|
77

Here's what we ended up doing.

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

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

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) {
  enableProdMode();
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
    routing],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    { provide: APP_BASE_HREF, useValue: window['_app_base'] || '/' },
  ]
})
export class AppModule { }
Improve this answer

8 Comments

Error TS7017: Element implicitly has an 'any' type because type 'Window' has no index signature. useValue: (window as any) ['_app_base'] || '/'helps
Adding it as an answer below, as the content length is too long for a comment.
@Amit Please see my answer below for an easy solve in the newest ng2.
How did you solve issue with other files. My browser is trying to load localhost:8080/main.bundle.js, but it can't because my contextPath is different? (It should be fetching localhost:8080/hello/main.bundle.js.)
This works in angular 10. But make sure to remove <base href="/"> line from index.html and remove setting base href in angular.json file.
|
45

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';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    appRoutingProviders,
    {
        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;
}
Improve this answer

9 Comments

I have myapp deployed to subfolder. My url now looks like this: http://localhost:8080/subfolder/myapp/#/subfolder/myroute Is this how yours look like? Do you know how to get rid of the subfolder after the # so that it can just be http://localhost:8080/subfolder/myapp/#/myroute?
Oh. I think href base is only required for LocationStrategy. In my case, I am using HashLocationStrategy. So I con't even need to set it. Did you have write special code to handle refresh with LocationStrategy?
Yes, base href is only required for LocationStrategy AFAIK. As for writing special code to handle refresh with LocationStrategy, not sure what you mean exactly. Are you asking, what if my "base href" changes during an activity in my app? Then, yes, I had to do a dirty thing like window.location.href = '/' + newBaseHref; where it was required to be changed. I am not too proud of it. Also, to give an update, I moved away from these hack solutions in my app as it was becoming a design problem for me. Router params work perfectly fine, so I stuck to it.
What does your appRoutingProvider look like, Krishnan? I see the accepted answer used the same; maybe you just copied his providers, but if not, can you give me a sample or describe its purpose? The documentation only imports routing modules, it doesn't use any routing-related providers (as far as I can see)
@Krishnan Here is what I have to do with nginx to make it work: location /subfolder/myapp/ { try_files $uri /subfolder/myapp/index.html; } location /subfolder2/myapp/ { try_files $uri /subfolder2/myapp/index.html; }
|
23

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]
Improve this answer

4 Comments

This answer is incorrect, it does not work for routes such as /your-app/a/b/c. If you refresh your page from such a route, Angular will look for the runtime, polyfills and main JS files and styles CSS file under /your-app/a/b/. They are obviously not at that location, but under /your-app/
@toongeorges This answer was written almost two years ago using a configuration file that is detected and executed by the Apache Web Server software to handle routing on page reload. For you to say this solution is incorrect and does not work is misleading, but what you mean is that you could not figure out how to get it to work with your configuration.
I overlooked the Apache rewrite rule and I do not know enough about it to say that this would not work on Apache, so I may be wrong and your answer may be correct. Though in any case I prefer a solution that does not require you to modify the server configuration as there have been given multiple answers here, because this makes the application portable across different servers.
Using ./ breaks routing to addresses which are multiple levels deep. e.g. http://localhost:4200/foo/bar.
20

Simplification of the existing answer by @sharpmachine.

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

@NgModule({
    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.

Improve this answer

1 Comment

This is very similar (and thus supported) to official documentation angular.io/api/common/APP_BASE_HREF
14

This work fine for me in prod environment 

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

2 Comments

This solution has a great limitation with multiple VD setup in IIS. It causes the duplicate loading of chunks.
Using hardcoded base-href and calling http://my.app.com/app1 changes url to http://my.app.com/app1/ ( / at the end) This solution also worked for me fine in case of http://my.app.com/app1 since in changes to http://my.app.com/app1/ - otherwise resources cannot be loaded.
8

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
Improve this answer

1 Comment

This also needs to make a build for each app.
6

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); 
    req.send();
    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) {
      break;
    }
  }

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

1 Comment

This solution was the only one really working for my deployment scenario: fully dynamic base path and PathLocationStrategy. All the other solutions would not work on hard reload on sub-paths.
5

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.

Improve this answer

1 Comment

this requires a different build for each environment, with all its implications.
3

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
Improve this answer

Comments

2

You can set the base href dynamically in the app.module.ts file using this: https://angular.io/api/common/APP_BASE_HREF

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

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}
Improve this answer

1 Comment

This does not have the same exact effect as setting <base href="/my/app"/>. See stackoverflow.com/questions/69094451/…
0

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

"script": {
    "build": "ng build --base-href ./"
}
Improve this answer

Comments

0

I am late for the show, but you can use a rewrite rule if you are deploying to IIS (I am sure it can be done with other webservers as well).

You can modify the content of the outgoing response when the index.html is requested and replace the base href dynamically. (url rewrite module must be installed into IIS)

The following example assumes you have <base href="/angularapp/"> in your index.html

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="Modify base href to current path">
                    <match filterByTags="Base" pattern="^(.*)(/angularapp/)(.*)" />
                    <conditions logicalGrouping="MatchAll" trackAllCaptures="true">
                        <add input="{REQUEST_URI}" pattern="^(.*)/index.html$"/>
                    </conditions>
                    <action type="Rewrite" value="{C:1}/" />
                </rule>
            </outboundRules>
        </rewrite>
    </system.webServer>
</configuration>
Improve this answer

Comments

0

This has been a massive headache, #location strategy doesnt seem to do what is says on the tin (seemed like it was an obvios fix but sadly not) so here is what worked for me. Thanks to all for the pointers!

Note I am calling php pages from within my app that are relative to the application path, this was going wrong on a refresh because the folder was one level too high. This is addressed in the in2 section of the config below.

Create a web.config file and put it in your /src folder

<configuration>
<system.webServer>
  <rewrite>

<rules>
            <clear />
            <rule name="in2" stopProcessing="true">
                <match url="(.*)(.php)" />
                  <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="../{R:0}" />
            </rule>
            <rule name="Angular Routes" stopProcessing="true">
                <match url=".*" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                    <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                </conditions>
                <action type="Rewrite" url="../myappname/" />
            </rule>

</rules>
  </rewrite>
</system.webServer>

Create a myappname.html file and put it in the /src folder Add both to the Angular.json build section under assets

"assets":{ ["projects/myapp/src/myappname.html","projects/toolbar2/src/web.config"
]

In the index.html

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

var probePath = 'myappname.html';
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) {
    break;
  }
}

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

Comments

0

I want to first cite @MaximeMorin comment:

My experience with ./ has been very different. It works until the user navigates to a route and hit the browser's refresh button or keys. At that point, our rewrites handle the call, serves the index page, but the browser assumes that ./ is the current route not the web app's root folder. We solved the OP's issue with a dynamic (.aspx, .php, .jsp, etc) index which sets the base href.

This aligns with my experience. Using a ./ base href breaks page reloading when nested routes are used. However, at least for Apache and NGINX web servers, there is the SSI (Server Side Includes) option, which allows to dynamically adjust <base href="..."> tag without involving additional script engines.

Apache configuration sample

.htaccess (assuming the folder for angular app is <webroot>/prefix):

Options +Includes
<Files "index.html">
AddOutputFilter INCLUDES html
</Files>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /prefix/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]
</IfModule>

index.html (ap_expr syntax):

<head>
<!--#if expr="v('SCRIPT_NAME') =~ m#^(.*/)index\.html$# && $1 =~ /^(.*)$/" -->
<!--#set var="base" value="$0" -->
<!--#else -->
<!--#set var="base" value="/" -->
<!--#endif -->
<base href="<!--#echo var="base" -->">
...

index.html (legacy apache 2.2.x syntax):

<head>
<!--#if expr="$SCRIPT_NAME = /^(.*\/)index\.html$/" -->
<!--#set var="base" value="$1" -->
<!--#else -->
<!--#set var="base" value="/" -->
<!--#endif -->
<base href="<!--#echo var="base" -->">
...

NGINX configuration sample

nginx.conf snippet (assuming the folder for angular app is <webroot>/prefix):

location /prefix/ {
    ssi on;
    try_files $uri /prefix/index.html;
}

index.html:

<head>
<!--#if expr="$uri = /^(.*\/)index\.html\z/" -->
<!--#set var="base" value="$1" -->
<!--#else -->
<!--#set var="base" value="/" -->
<!--#endif -->
<base href="<!--# echo var="base" -->">
...

Note that I'm using the \z PCRE token instead of $ in the above regex. The Nginx SSI engine will interpret $ as a variable name, throwing the error

invalid variable name in "^(.*\/)index\.html$" while sending response to client...

Unfortunately, these snippets can't be used in the src/index.html template as-is. Angular's HTML parser isn't SSI-aware, and the <base href="<!--# echo var="base" -->"> tag will be completely broken by the ng build process, so some post-build index.html patching will be required.

Improve this answer

Comments

-1

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 + '" />');
</script>
Improve this answer

2 Comments

Does this solution worked for you ? I am facing the problem. Can you please reply to my post as well. stackoverflow.com/questions/53757931/…
Please avoid using document.write(): developers.google.com/web/updates/2016/08/…
-15

I just changed:

  <base href="/">

to this:

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

don't forget ending with /

Improve this answer

1 Comment

how is this dynamic?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.