[Angular] Angular 라우팅 전략(1) - Url에서 #을 사용하는 이유

Angular에서 작업하는 도중 아래 이미지와 같이 URL에 #이 붙어서 표출됐다.

#이 붙는 바람에 페이지를 처리할 때 오류가 발생하여 해결 방법이 필요하던 상황..

 

url에 #이 붙음

 

Angular 라우팅 전략

 

#이 붙은 이유는 Angular가 해시 경로를 지원하는 이유라고 하는데,

일반적으로 Angular 프로젝트에서는 애플리케이션 라우팅을 구성할 때 HTML5 라우팅(PathLocationStrategy)와 해시 스타일 URL 라우팅(HashLocationStrategy) 중에 선택할 수 있다.

 

기본값은 PathLocationStrategy이며, 함수에 {useHash: true} 를 사용한다면, 해시 스타일 라우팅 경로를 구현할 수 있다.

 

출처 : https://stackoverflow.com/questions/52563837/angular-using-in-urls

Angular using # in URLS

 

---

 

LocationStrategy 및 브라우저 URL 스타일

 

Angular 가이드 문서에 따르면, 

라우터가 새 Component View로 이동하면, 해당 View에 대한 Url로 브라우저의 위치와 기록을 업데이트 한다.

 

최신 HTML 브라우저는 서버 페이지 요청을 트리거하지 않고 브라우저의 위치와 기록을 변경하는 기술인 history.pushState을 지원한다.

 

• HTML5 pushState URL 

localhost:44383/home/

 

이전 브라우저는 "#"(해시) 다음에 변경이 발생하지 않는 한 위치 URL이 변경될 때 페이지 요청을 서버로 보내고,

라우터는 해시를 사용하여 응용프로그램 내 경로 URL을 구성함으로써 이 예외를 이용할 수 있다.

 

• Hash URL

localhost:44383/#/home/

 

라우터는 두가지 LocationStrategy 공급자를 통해 2개의 URL을 모두 지원하는데,

해당 LocationStrategy는 아래와 같다.

 

1. PathLocationStrategy - HTML5 pushState URL 
2. HashLocationStrayegy - Hash URL

 

 

Angular 가이드 문서 : https://angular.io/guide/router#locationstrategy-and-browser-url-styles

Angular