Angular2 how to set app root path independently from html base url

Actually there is a solution in the angular docs but it's pretty hard to find. It's possible to set the base url in angular without using a <base> tag.
So you just have to set the base url to a global JavaScript variable using fluid and then provide it to angular in the app module.

Fluid:

<script>   var app_base_url = '<f:uri.page pageUid="{currentPageUid}" />';</script>

Angular:

declare var app_base_url;import {Component, NgModule} from '@angular/core';import {APP_BASE_HREF} from '@angular/common';@NgModule({  providers: [{provide: APP_BASE_HREF, useValue:app_base_url}]})class AppModule {}

https://angular.io/docs/ts/latest/api/common/index/APP_BASE_HREF-let.html

I would advice not to use the baseURL config attribute. It is a bit outdated and leads to some problems, like yours.

You can set

config.absRefPrefix = /

All links will be prepended with / now and will also work.

The reason is that your web-server is handling the URL already and thus it's not delegated to the Angular2 routing. To overcome this, you have to use a different LocationStrategy in Angular.

What you're looking for is called HashLocationStrategy to create routes like /page1/app/#/angular-controller/ where /page1/app/ is served from the web-server and /angular-controller/ is the first argument to your Angular2 application logic.

Adjust your module declaration (e.g. app.module.ts)

import {Component, NgModule} from '@angular/core';import {  LocationStrategy,  HashLocationStrategy} from '@angular/common';@NgModule({  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}]})class AppModule {}

Find more details in the Angular2 documentation about that (the example was taken from there as well).