[Angular] Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: '' 해결 방법

URL parameter에 특수기호가 들어있으면 router 설정을 제대로 해줬다고 생각이 들어도 다음과 같은 에러가 발생할 수 있다.

 

나 같은 경우는

( )

위 괄호들이 문제를 일으켜 다음과 같은 에러를 뱉고, 페이지가 그려지지 않았다.

 

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'MSBlaster%2520Worm,%2520Messenger...'
Error: Cannot match any routes. URL Segment: 'MSBlaster%2520Worm,%2520Messenger...'
    at ApplyRedirects.webpackJsonp../node_modules/@angular/router/esm5/router.js.ApplyRedirects.noMatchError (router.js:1765)
    at CatchSubscriber.selector (router.js:1730)
    at CatchSubscriber.webpackJsonp../node_modules/rxjs/_esm5/operators/catchError.js.CatchSubscriber.error (catchError.js:105)
    at MapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.error (Subscriber.js:108)
    at MapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error (Subscriber.js:134)
    at MapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.error (Subscriber.js:108)
    at LastSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error (Subscriber.js:134)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)

 

https://www.urlencoder.org/

URL Encode and Decode - Online

위 페이지에서 다음과 같은 괄호들을 인코딩 했더니

( => %28
) => %29

로 변환되었다.

 

파라미터에 있는 기호들을 저 인코딩 값으로 변환하여 요청했더니 페이지가 정상적으로 그려졌다.

---

 

Angular router에서 특정 기호들은 인코딩 변환이 필요하다고 한다.

 

※ 인코딩 변환이 필요한 기호들

! ' ( ) *

 

세상에는 똑똑한 사람들이 많다.