Inject query parameter into dependency provider factory in Angular

Question

I want a value from the window.location search parameters passed to the body of a dependency provider factory, ideally in an idiomatic Angular way.

Use case: writing my first Angular app I have the app running on one port and the backend server on another. I want to append &backend=localhost:12345 to the URL to have the app talk to that host. This is read-only, hand-written to the URL bar. I don't want to navigate to such a URL.

Approaches considered:

1. Use window.location.href directly. Makes the code depend on a browser, potentially breaking test fixtures or anything else that wants to execute the code outside a browser.
2. Use PlatformLocation.href . The doc says “this class should not be used directly by an application developer.”
3. Use Location.path() . Seems to work, but also seems to not offer any way to access the full URL. The stand-alone path includes the query parameter, but appears to be invalid as an argument to the URL constructor, so I ended up with something like new URL('http://no-such-host/' + location.path()).searchParams.get('backend') . Hardly elegant.
4. Use ActivatedRoute.queryParams somehow. Injecting an ActivatedRoute into my factory apparently gives me a default instance (stringifies as Route(url:'', path:'') ) so the query parameters seem to be absent. And the queryParams method returns an Observable , while from what I read on the net, using asynchronous code flow for a provider factory is tricky at best.

Is there a better way to let a factory make decisions based on a query parameter?

Answer 1

If I understand correctly you want to take the query param backend from your path programatically.

You can use the Angular Router like the example below:

@Service()
export class MyFactory {
  constructor(private route: ActivatedRoute) {}

  fetch() {
    const backendUrl = route.snapshot.queryParams['backend'] || 'defaultUrl';

    // do something here
  }
}

Alternatively, you could use the Location object to get the query param like bellow:

const backendUrl = new URLSearchParams(Location.search).get('backend');

// do something here