Angular F5 404, Angular Refresh 404(앵귤러 새로고침 404, 앵귤러 F5 404 )

 

 

앵귤러를 개발하다보면 F5키나 새로고침 키를 눌러서 404 오류가 나는 경우가 존재한다.

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

즉, 가상의 주소를 매핑해놨는데....새로고침 하면 실제 주소로 이동하기 때문이다.

 

이를 방지하기 위해서는 라우팅을 관리하는 모듈에서 아주 간단한 세팅만 해 주면 된다.

아래 라우팅과 관련된 샘플 모듈 코드를 보면,

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}),  //라우팅과 옵션
    //생략..
  ],  
  
  //생략..
});
export class AppModule { }

 

라우팅 옵션에 보면 useHash라는 부분이 true로 된 것을 볼 수 있다.

해당 옵션을 설정하면 다음과 같은 모습의 주소로 앱이 동작됨을 볼 수 있다.

# 기호가 생겼다.

user라는 경로로 이동했는데 마찬가지로 #기호가 있다.

 

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

아래 useHash를 꼭 기억하자.

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

 

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

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

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

 

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