Invalid route in angular 6 throwing uncaught exception

Question

Putting a script tag along with my route param throwing an exception

const routes: Routes = [
  { path: 'product-listing/:language/:country', component: ProductFinderShellComponent },
  { path: 'product-listing/:language', redirectTo: '/error' },
  { path: 'product-listing', redirectTo: '/product-finder/en/us', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})

url tried:

http://localhost:4200/product-listing/en/us<script>alert('hi')</script>

Error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: ''hi''
Error: Cannot match any routes. URL Segment: ''hi''

All helps are appreciated. Tia

Answer 1

You should use encodeURIComponent for prevent special character in URL

let param = encodeURIComponent('us<script>alert('hi')</script>'));
let url = 'http://localhost:4200/product-listing/en/' + param;