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

Question

Having round parenthesis ( ) in some of urls example, http://localhost:4200/pdf/abc/AQAR%20(2017-18).pdf or http://localhost:4200/pdf/abc/AQAR%20(2016-17).pdf

point:- taking slug from urls

while doing redirection error happen below is the src code

app-routing.modules.ts

{ path: 'pdf/abc/:slug', component: PdfComponent},

pdf.component.ts

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";

@Component({
 selector: 'app-pdf',
 templateUrl: './pdf.component.html',
 styleUrls: ['./pdf.component.css']
})

export class PdfComponent implements OnInit {

constructor(private route: ActivatedRoute) {
this.route.params.subscribe(params => {
  const slugData = params.slug;
  const URL = 'https://testexample.com/pdf/abc';
  setTimeout(() => {
    if (slugData) {
      window.location.href = URL + slugData;
    } else {
      window.location.href = 'https://testexample.com/';
    }
  }, 0);
 });
}
ngOnInit() {
  }
}

when i put below url its give an error

http://localhost:4200/pdf/abc/AQAR%20(2017-18).pdf

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

if i paste below url in url-bar it works and pdf will be shown https://testexample/pdf/abc/AQAR%20(2017-18).pdf

can anyone tell me where i am making mistake

Answer 1

Please encode the filename before navigating, your issue will be resolved!

const pdf = 'AQAR%20(2017-18).pdf';
const uri = 'http://test.com/foo?hello=' + encodeURIComponent(pdf);

Answer 2

You have to escape '(' with %28 and ')' with @29 and '.' with %2e

http://localhost:4200/pdf/abc/AQAR%20%282017-18%29%2epdf
http://localhost:4200/pdf/abc/AQAR%20@282016-17%29%2epdf

You can refer https://www.eso.org/~ndelmott/url_encode.html