How to utilise URLSearchParams in Angular 2?

Question

I've been hours now trying to figure out how to correctly inject the URLSearchParams dependency into a component.

In my boot.ts I'm making sure to include HTTP_PROVIDERS - I'm honestly not even sure it's required for URLSearchParams.

I've also ensured that I'm including the http bundle script in my page.

boot.ts

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  PanelsService,
  FiltersService
])

It is FiltersService where I'm attempting to inject URLSearchParams.

filter.service.ts

import {Component, Injectable} from 'angular2/core';
import {URLSearchParams} from 'angular2/http';

@Injectable()
export class FiltersService {

  constructor(private _searchParams:URLSearchParams) { }

  setFilter(name, value) {
    this._searchParams.set(name, value);
  }

  getFilter(name) {
    this._searchParams.get(name);
  }
}

Injecting URLSearchParams in the constructor causes the error:

I've read this article, a couple of times in fact and can't figure out where I'm going wrong.

For what it's worth, I encounter the same problem when attempting to inject RouteParams. I'm clearly missing something fundamental.

EDIT: For some more clarity, this is what my StoriesComponent looks like:

import {Component, OnInit} from 'angular2/core';
import {PanelsService} from '../panels/panels.service';
import {RouteParams} from 'angular2/router';
import {FiltersService} from '../common/filters.service';

@Component({
  selector: 'stories',
  templateUrl: 'app/components/stories/stories.component.html'
})
export class StoriesComponent implements OnInit {

  constructor(public panelsService:PanelsService,
    public filtersService: FiltersService,
    private _routeParams:RouteParams) {

    this.panelsService.setSelectedPanel(this._routeParams.params['panelId']);
  }

  ngOnInit() {
    console.log('Stories');
  }

  addPanel() {
    var newPanel = {
      id: 999,
      name: 'my new panel name',
      time: 744
      // time: 168
    }

    this.panelsService.addPanel(newPanel);
  }
}

EDIT 2: Here's a plunk which demonstrates my issue - see peopleService.ts

Answer 1

So after a lot of research and help from Angular's Gitter, I've found out the answer to two of my problems.

Firstly, URLSearchParams cannot be injected in the constructor as a dependency like I'm trying to do - it can be newed however.

var params = new URLSearchParams()

It also cannot be used as I was hoping it could be, which was to update the location. It appears to be simply a utility function for parsing query strings and setting query params which you can then use with Router's navigate method.

Secondly, in order to access RouteParams it appears that your component needs to be instantiated by the Router, i.e. associating your component with a path in a @RouteConfig decorator.

This was not my case as I had a <my-component></my-component> in the shell of my application which was not instantiated by the Router.

This is my current understanding and hopefully this helps others with the same problem.