하위 디렉토리의 앱으로 라우팅 할 때 URL이 Angular2로 증가합니다.

Question

내 Angular2 앱이 IIS의 웹 사이트의 하위 디렉토리에 배포되었습니다. 다음 명령을 사용하여 빌드합니다. (--bh 앱의 루트로 하위 디렉토리를 설정) :

import { Routes } from '@angular/router'; 
import { DnaPlotComponent } from './dna-plot/dna-plot.component'; 

export const routes: Routes = [{ path: '', component: DnaPlotComponent }]; 

:

app.routes.ts을 다음과 같이

는

ng build --bh testdna --no-aot --dev 

나는 다음 응용 프로그램에서와 라우팅 사용

app.module.ts :

import { RouterModule } from '@angular/router'; 
import { routes } from './app.routes'; 
... 
RouterModule.forRoot(routes) 

페이지가 URL이이 갱신 될 때마다 그것에 추가 된 서브 디렉토리. 즉, URL이 무한히 커지고 새로 고침되지 않아 404가됩니다. 다음은 내가 본 것의 예입니다.

https://develop.domain.com/dnaplot/dnaplot#/dnaplot/ 

라는 원래의 URL은 다음과 같습니다 이런 일을 막을 수

https://develop.domain.com/dnaplot 

어떤 아이디어가 크게 감상 할 수있다.

Answer 1

<base href="...">을 설정하거나 APP_BASE_HREF에 배포 경로를 지정해야합니다.

자세한 내용은 Angular 2 router no base href set

, 그것은 단지 라우터에 영향을 미치는 때문에 APP_BASE_HREF는, 일반적으로 더 나은 방법입니다 제공 참조하십시오 동안 SVG 참조와 같은 <base href="..."> 영향 다른 물건.

빈 경로 ''없이 자식 경로와 경로

이 pathMatch: 'full'

export const routes: Routes = [{ path: '', component: DnaPlotComponent , pathMatch: 'full'}]; 

Answer 2

에게 결국 해결책을해야하는 것은 즉, 빈 문자열에 기본 HREF를 설정하는 간단했다. <base href="">.

라우터가 원래 빌드 명령에서 --bh testdna을 '인식하고있는 것'으로 보이므로 href 태그의 하위 디렉토리를 다시 지정할 필요가 없습니다.