CODEWITHSUNDEEP
angular
Leo
Leo

Reputation: 1046

HashLocationStrategy and query parameters in angular 4

I am migrating an existing angular 4 app from PathLocationStrategy to HashLocationStrategy and need to keep entry point url working. It looks something like www.test.com/?param1=123

The problem is that as soon as I switch it to HashLocationStrategy, query params are not accessible through activatedRoute.queryParams anymore. (www.test.com/#/?param1=123 works fine but I need to preserve the original url entry as well)

So is there a way to get param1 value from www.test.com/?param1=123 with HashLocationStrategy? I don't really want to create an empty landing page that will redirect to www.test.com/#/?param1=123 unless I can't avoid it.

Upvotes: 3

Views: 5463

Answers (1)

Estus Flask
Estus Flask

Reputation: 222503

Since HashLocationStrategy is already used as default, PathLocationStrategy should be additionally injected in order to get to real browser location:

  providers: [
    PathLocationStrategy,
    {provide: LocationStrategy, useClass: HashLocationStrategy},
    ...
  ]

...

class AppComponent {
  constructor(router: Router, pathLocationStrategy: PathLocationStrategy) {
    const basePath = pathLocationStrategy.getBaseHref();
    const absolutePathWithParams = pathLocationStrategy.path();

    if (basePath !== absolutePathWithParams) {
      router.navigateByUrl(absolutePathWithParams);
    }
  }
}

If there is base url, it should be additionally taken away from the path.

Upvotes: 2

Related Questions