Angular - How to make router-outlet directive ignore query params

Question

I have a routing.module.ts file that contains the following code:

export const routes: Routes = [
    ...
    { path: ‘profile/:id’, component: ProfileComponent }
];

I have an app.component.ts file that contains the template:

<div class=“app-container”>
    <header></header>
    <div class=“body”>
        <router-outlet></router-outlet>
    </div>
</div>

When I try to navigate to this site using a query param, e.g mysite.com/profile/1234?q=5, I get a 404 for mysite.com/profile/1234%3Fq%3D5

How do I make it so that the router-outlet doesn’t include the query parameter portion of the request?

There are tons of tutorials online pick one!!! – Mises Oct 04 '19 at 19:33 — Mises, Oct 04 '19 at 19:33

score 0 · Answer 1 · answered Oct 04 '19 at 19:48

0

In your router.navigate() method, try to pass the URL by first decoding it as

router.navigate([decodeURIComponent(url)]);

Activated Route does not encode the URL before accessing the parameters

answered Oct 04 '19 at 19:48

Saksham

1 Answers1