Angular2 routing redirects to wrong url - .htaccess

Question

I have an angular2 application in a subfolder /draft on a apache server.
In order to get it working I added this .htaccess in /draft:
Options Indexes FollowSymLinks
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /draft/index.html [L]
And added this to /draft/index.html in the head:
<base href="draft/">
My components and other typescript files are in /draft/app/,
and my /draft/systemjs.config.js looks like this:
(function (global) {
System.config({
paths: {
'npm:': '/draft/node_modules/'
},
map: {
app: '/draft/app',
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'rxjs': 'npm:rxjs',
// ...
},
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
This all works fine, but when I try to add routing something goes wrong.
When the user goes to /draft/foo, I want the component FooComponent to be shown.
But when the user goes to /draft/foo, the FooComponent is shown as expected, but for some reason the url is changed to /draft/draft/draft/foo.
This is my /draft/app/app.routing.js:
// ...
const appRoutes: Routes = [
{
path: 'draft/foo',
component: FooComponent
}
];
export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);
I added the routing const to the imports array of my AppModule, /draft/app/app.module.ts:
// ...
#NgModule({
imports: [ BrowserModule, HttpModule, routing ],
declarations: [ AppComponent, FooComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
/draft/app/components/AppComponent.ts looks like this:
import {Component} from '#angular/core';
#Component({
selector: 'my-app',
template: '<router-outlet></router-outlet>'
})
export class AppComponent {}
So why is /draft/foo redirected to /draft/draft/draft/foo and what can I do to stop it?

Answer 1

Apparently the base was incorrect.
With the following base everything works.
<base href="http://localhost/draft/" />
To make it more dynamic I replaced it with this:
<script>
document.write('<base href="' + document.location + '" />');
</script>
But this only works when using the hash location strategy because otherwise the Route path is always ' '. So I ended up using the following:
<script>
document.write('<base href="' + document.location.protocol + '//' + document.location.host + '/draft/' + '" />');
</script>