Search code examples
angulartypescriptangular2-routing

Angular2 router keep query string

I wrote an Angular2 (v2.0.1) application that makes use of the router. The website is loaded with several query string parameters, so the full URL initially looks like this:

https://my.application.com/?param1=val1&param2=val2&param3=val3

In my route configuration, I have an entry which redirects an empty route:

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/comp1',
        pathMatch: 'full'
    },
    {
        path: 'comp1',
        component: FirstComponent
    },
    {
        path: 'comp2',
        component: SecondComponent
    }
];

My problem is, that after the app has been bootstrapped, the URL does not contain the query parameters anymore, instead it looks like this:

https://my.application.com/comp1

Is there any way I can configure the router so that it keeps the initial query string when navigating?

Thank you
Lukas

Solution

  • I don't think there is a way to define that in the routes configuration.

    Currently it is supported for routerLinks and imperative navigation to enable

    You can add a guard to the empty path route, where in the guard navigation to the /comp1 route is done.

    router.navigate(['/comp1'], { preserveQueryParams: true }); //deprecated. see update note

    router.navigate(['/comp1'], { queryParamsHandling: "merge" });

    There is a PR to allow to configure preserveQueryParams globally.

    Update note: from https://angular.io/api/router/NavigationExtras, preserveQueryParams is deprecated, use queryParamsHandling instead