라우팅 각도 4

Question

내 응용 프로그램에서 라우팅 문제가 있습니다. 내 지역에서는 모든 것이 올바르게 작동하지만 서버에서는 작동하지 않습니다. 프로그램에는 다음 경로가 있습니다.

const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'thankyou', component: ThankyouComponent }, 
    { path: 'home', component: UserHomeComponent, canActivate: [AuthGuard] }, 
    { path: 'publish', component: PublishComponent, canActivate: [AuthGuard] }, 
    { path: '**', component: PageNotFoundComponent } 
]; 

root route은 항상 작동합니다.

http://localhost:4200/publish 

그것을로드 문제가 없는지에 내가 로그인했다고 가정 :

내 컴퓨터에있는 경우에 나는 예를 들어, 직접 경로를 요청을 보냅니다. 그러나 경로로 서버에서 해당 경로를 실행하는 경우 :

http://myserver/mypath/dist/publish 

경로를 찾지 못했습니다.

서버에서 실행하기 위해 index.html도 수정했습니다. <base href="/mypath/dist/">

에 의해

<base href="/"> 내가 지시

routerLink="/publish" 

그것은 잘 작동을 사용하여 템플릿 HTML로 그 길을 실행합니다.

왜 이런 일이 발생하는지 알고 있습니까?

Answer 1

자산을 제외하고 index.html로 요청을 다시 라우팅하도록 웹 서버를 구성해야합니다.

nginx를 들어, nginx.conf의 서버 블록 또는 사이트 설정 내에서이 추가 : 아파치

location/{ 
    try_files $uri $uri/ /path/to/index.html; 
} 

이 this answer을 확인합니다.

Answer 2

다음은 URL을 입력 할 때 적중 될 경로에 대한 경로 지정 구조를 만드는 파일의 예입니다. 지금까지 귀하의 질문에 귀하가 귀하의 앱 외부 경로를 실제로 처리하고 있다는 것을 알지 못했습니다. 즉, URL로 입력되는 경로를 정의하지 않은 경우 서버의 일부 URL이 어디로 가는지 어떻게 알 수 있습니까? 루트 경로가없는 것 같습니다. 그게 내가 운전 해 온거야.

import { Routes, RouterModule } from '@angular/router'; 
import { SomeComponent } from 'app/components/some-component'; 
import { Path1Component } from 'app/components/path1-component'; 
import { Path2Component } from 'app/components/path2-component'; 
import { Path3Component } from 'app/components/path3-component'; 

const MyRoutes: Routes = [ 
    { 
     path: 'root/', 
     component: SomeComponent, 
     children: [ 
      { 
       path: 'path1', 
       component: Path1Component 
      }, 
      { 
       path: 'path2', 
       component: Path2Component 
      }, 
      { 
       path: 'path3', 
       component: Path3Component 
      }, 
      { 
       path: '**',   // default path 
       component: Path2Component 
      } 
     ], 
    } 
]; 

@NgModule({ 
    imports: [ 
     RouterModule.forChild(MyRoutes) 
    ], 
    exports: [ 
     RouterModule 
    ] 
}) 

export class MyRouting { } 

Answer 3

는이 사이트 https://github.com/angular/angular/issues/11884 에서 솔루션을 발견하지만 서버에 대한 모든 권한이 없습니다. 각도 가이드가 여기에 말한대로 루트 모듈을 HashLocationStrategy로 전환했습니다. https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles

그리고 작동합니다!