Angular QueryParams not fetched on page load

Question

In an Angular app (v4.3.6)I have a search page where the search parameters are saved in the URL. As example: https://mysite/#/search?q=queryText&page=3

The requirement is that the users can pass the URL populated with search parameters to other users to share the same search results. Everything works fine, except when the page is refreshed, as in this case all the query parameters (present in URL) are ignored and therefore lost after the page loads.

Our routing file:

const routes: Routes = [
{ path: "", redirectTo: "/home", pathMatch: "full" },
{ path: "home", component: HomeComponent },
{ path: "search", component: SearchComponent },
{ path: "404", component: NotFoundComponent },
{ path: "**", redirectTo: "/404" },
];

Service file to update the URL with new queryParams:

public updateUrl(state) {

    // Here logic to transform state into proper queryParams format

    this.router.navigate(["/search"], {
       queryParams: params,
       queryParamsHandling: "merge",
       replaceUrl: true,
    });
}

On page refresh, Angular keeps only the routeParams but not queryParams (even if they are available in the URL).

Is it possible to persist them on page refresh with a proper setting or the only way would be to persist those locally and restore them?