2017-11-17 1 views
0

각도 4 개의 단일 페이지 응용 프로그램이 있습니다. 페이지를 새로 고치거나 유효한 URL을 브라우저에 입력하면 앱의 루트 경로로 리디렉션됩니다.각도 4 새로 고침시 루트로 리디렉션

모든 요청을 /index.html로 리디렉션하도록 nginx config를 변경했습니다. 브라우저 초기 상태에서 404를 가져 오는 초기 문제가 해결되었습니다.

server { 
    listen 80; 

    server_name bla.com www.bla.com 

    location/{ 
     root /home/admin/web/bla.com/public_html; 
     index index.html index.htm; 
     try_files $uri $uri/ =404; 
    } 

    error_page 404 /index.html; 

    error_page 500 502 503 504 /50x.html; 

    # To allow POST on static pages 
    error_page 405  =200 $uri; 

    location = /50x.html { 
     root /usr/share/nginx/html; 
    } 
} 

** 편집 **

각도 라우팅은 단순히 RouterModule에 의해 처리됩니다 : 내가 얻을 수있는 방법이,

// ... 

import { RouterModule, Routes } from '@angular/router'; 

// ... 

const appRoutes: Routes = [ 
    { path: '', component: DashboardComponent, canActivate: [AuthGuard] }, 
    { path: 'login', component: LoginComponent }, 
    { path: 'register', component: RegisterComponent }, 
    { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] }, 
    { path: 'clients', component: ClientsComponent, canActivate: [AuthGuard], children: [ 
    { path: 'add', component: AddClientComponent, canActivate: [AuthGuard]} 
    ]}, 
    { path: 'projects', component: ProjectsComponent, canActivate: [AuthGuard], children: [ 
    { path: 'add', component: AddProjectComponent, canActivate: [AuthGuard] } 
    ]}, 
    { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] }, 
    { path: 'invoices', component: InvoicesComponent, canActivate: [AuthGuard], children: [ 
    { path: 'invoices/new-invoice', component: NewInvoiceComponent, canActivate: [AuthGuard] } 
    ]} 
]; 

난 정말 HashLocationStrategy을 사용하지 않으 브라우저가 새로 고침되거나 URL을 입력 할 때 정확한 페이지를 제공하기위한 각도?

+1

nginx와 다른 각도로 라우팅 관련 코드를 공유하십시오 –

+1

[AuthGuard]가 문제의 원인입니다. –

+0

정답, 감사합니다! –

답변

1

[AuthGuard]가 문제의 원인입니다.

+0

문제가 해결되면이 대답을 해결할 수 있습니다. –

관련 문제