Angular router not recognizing () in path

Question

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.

Pankaj Parkar · Accepted Answer · 2022-08-02 13:11:31Z

2

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

answered Aug 2, 2022 at 13:11

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular router not recognizing () in path

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related