[Angular] 새로고침 시 404 페이지 뜨는 경우

# 해당 현상 원인

앵귤러에(2.0 이상)서는 페이지를 한번에 전부 로드하고 사용자에게 보여주는 방식이므로 새로고침을 누를경우 해당 동작중인 서버로 url을 호출하기 때문이다. 즉, 가상의 주소를 매핑해놨는데....새로고침 하면 실제 주소로 이동하기 때문이다.

# 일반적인 router 설정

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

...

const router : Routes = [  //통상적인 라우팅 객체 모습

  {path : '' , component : 컴포넌트1},  

  {path: '**',redirectTo: ''} ,

  {path : 'user' , component : 컴포넌트2}....

]

...

@NgModule({

  imports: [

    RouterModule.forRoot(router,{enableTracing:false, useHash: true}),  //라우팅과 옵션(해결책1)

    //생략..

  ],  

  //생략..

});

export class AppModule { }

# 해결책1 : {useHash : true}

해당 # 기호가 붙으면서 새로고침을 아무리 눌러도 404페이지로 이동하지 않음을 알 수 있다.

ex. RouterModule.forRoot(라우팅내용,{useHash: true})

# 해결책2 : {onSameUrlNavigation: 'reload'}

만약 #기호가 뵈기 싫으면 다른 옵션을 주어도 된다.

RouterModule.forRoot(router,{enableTracing:false, onSameUrlNavigation: 'reload'}),

해당 옵션을 주게 되면 그냥 새로고침해도 기존 주소 그대로 위치하게 된다.

 

앵귤러 2.0 이상 버전에서만 사용 가능한 내용이다.