Angular router not recognizing () in path

user_11364184 0
Viewed 34

I am trying to load an angular component based on same parameters provided in router path. My path looks like such.

  {
    path: ':code/:country',
    component: CardViewComponent,
    resolve: {
      configuration: CardViewService
    }
  },

First, i am lazy loading my module and in that nodules router i am trying to load the above component. The lazy loading of the module is

 {
    path: 'main/chapters',
    loadChildren: () => import('./features/chapter.module').then(m => m.ChapterModule),
  },

Every thing works fine but the problem arises when () are passed in as the parameter for this route. For example

/main/chapters/Au/Australia

results in proper output but when it becomes something like

/main/chapters/Au/Australia(Old)

The component is not loaded. But again if the brackets are removed then every thing works fine. I have tried encodeUriComponent but it did not help. And changing the url is not an option for me.

Can any body guide me with this. I have also searched for github issues https://github.com/angular/angular/issues/10280 but could not get much out of it. Really looking forward to some solutions.

angular-router angular
1 Answers

The workaround provided in the GitHub link does work.

encodeURIComponent(str) {
  return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
    return '%' + c.charCodeAt(0).toString(16);
  });
}

const url = `/main/chapters/Au/${this.encodeURIComponent('Australia(Old)')}`;
this.router.navigate(url);

Github Issue

Stackblitz

user_24354730
Related