Angular2 라우팅이 잘못된 URL로 리디렉션됩니다.

Question

아파치 서버의 하위 폴더 /draft에 angular2 애플리케이션이 있습니다.

Options Indexes FollowSymLinks 

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

그리고 머리에 /draft/index.html이 추가 :

<base href="draft/"> 

내 구성 요소와 다른 타이프 파일/초안/응용 프로그램에 위해 은 내가/초안이 .htaccess 추가 작업하세요/ 내 /draft/systemjs.config.js은 다음과 같습니다

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

이 모두 작동 잘하지만 어디 갔지 n 뭔가 잘못된 라우팅을 추가하려고합니다. 사용자가 /draft/foo으로 이동하면 FooComponent 구성 요소가 표시되기를 원합니다.
그러나 사용자가 /draft/foo으로 이동하면 FooComponent가 예상대로 표시되지만 어떤 이유로 URL이 /draft/draft/draft/foo으로 변경됩니다.

이

은 내 /draft/app/app.routing.js :

/draft/app/components/AppComponent.ts

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

는 다음과 같습니다 : 내 AppModule의 수입 배열에 라우팅 CONST, /draft/app/app.module.ts을 추가

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

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

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

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

그렇다면 은 /draft/draft/draft/foo으로 리디렉션되는 이유는 무엇입니까? 중지하려면 어떻게해야합니까?

Answer 1

분명히 기지가 잘못되었습니다. 다음 기본 사항은 모두 작동합니다.

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

내가이 그것을 대체 좀 더 동적으로 만들려면 :

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

을하지만이 단지 작품을 사용할 때 hash location strategy 그렇지 않으면 루트 경로가 '항상 있기 때문에'. 그래서 나는 다음과 같이 사용했다 :

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