In Angular 4, how do I preserve query parameters in a redirected route?

Question

I have this route redirection in app-routing.module.ts:

{ path: '', redirectTo: '/home', pathMatch: 'full' }

Let's assume I have in index.html the line <base href="/mysite"> inside <head> and the site is visited with URL example.com/mysite?kiosk=true.

How do I preserve the query parameter kiosk=true through the redirection above?

I can get the query parameters with this code inside app.component.ts, but only when the route redirect above is commented out:

ngOnInit(): void {
    this.route.queryParams.first().subscribe((params: Params) => {
        console.log(params);
    });
}

How do I get it to work with the above redirect NOT commented out? Is there an easy way to globally set "always preserve query parameters" or do I have to do some hack inside app.component.js that gets the query params, then redirects to '/home' only if the path is empty?

No. I ended up just putting some redirect code in app.module.ts. — Jerry Huckins
I ended up using a guard to get to the token before the redirect kicks in. I don't think guards are intended for this, but it works.. — Jochem Kuijpers
That's a shame. I would like to understand the exact same thing. — Stuart Updegrave

Ahmad Qardahji Ahmad Qardahji · Accepted Answer · 2017-11-30T20:56:50

You can use for code nav { queryParamsHandling: 'preserve' }. for DOM nav use queryParamsHandling="preserve" for angular 4 and up. other wise, use { preserveQueryparams: true } from code and [preserveQueryParams]="true" from your DOM

In Angular 4, how do I preserve query parameters in a redirected route?

1 Answers