Angular2 Routing umleitet falsche URL

Question

Ich habe eine angular2-Anwendung in einem Unterordner /draft auf einem Apache-Server.

Options Indexes FollowSymLinks 

RewriteRule ^index\.html$ - [L] 
RewriteCond %{REQUEST_FILENAME} !-f 
RewriteCond %{REQUEST_FILENAME} !-d 
RewriteRule . /draft/index.html [L] 

Und fügte hinzu, dies zu /draft/index.html im Kopf:

<base href="draft/"> 

Meine Komponenten und andere Typoskript-Dateien sind in/Entwurf/app Um diese .htaccess in/Entwurf, um es arbeiten Ich habe /, und meine /draft/systemjs.config.js sieht wie folgt aus:

(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); 

Das alles funktioniert gut, aber wHE n Ich versuche Routing hinzuzufügen, etwas läuft schief. Wenn der Benutzer zu /draft/foo geht, möchte ich die Komponente FooComponent angezeigt werden.
Aber wenn der Benutzer zu /draft/foo geht, wird die FooComponent wie erwartet angezeigt, aber aus irgendeinem Grund wird die URL in /draft/draft/draft/foo geändert.

Das ist mein /draft/app/app.routing.js:

// ... 
const appRoutes: Routes = [ 
    { 
     path: 'draft/foo', 
     component: FooComponent 
    } 
]; 

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes); 

ich das Routing konst auf die Einfuhren Array meiner AppModule, /draft/app/app.module.ts hinzugefügt:

// ... 
@NgModule({ 
    imports:  [ BrowserModule, HttpModule, routing ], 
    declarations: [ AppComponent, FooComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

/draft/app/components/AppComponent.ts sieht wie folgt aus:

import {Component} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: '<router-outlet></router-outlet>' 
}) 
export class AppComponent {} 

Warum wird /draft/foo zu /draft/draft/draft/foo umgeleitet und was kann ich tun, um es zu stoppen?

Answer 1

Offenbar war die Basis falsch. Mit der folgenden Basis funktioniert alles.

<base href="http://localhost/draft/" /> 

Um es dynamischer zu machen ich es mit dieser Fassung:

<script> 
    document.write('<base href="' + document.location + '" />'); 
</script> 

Das funktioniert aber nur bei Verwendung der hash location strategy, da sonst die Strecke Pfad ist immer ‚‘. Also habe ich am Ende folgendes benutzt:

<script> 
    document.write('<base href="' + document.location.protocol + '//' + document.location.host + '/draft/' + '" />'); 
</script>