16

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:

enter image description here

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

2
  • what is storiesComponent in your project ? i think problem is in the that class not in the filter.service check one again storiesComponent. Commented Dec 21, 2015 at 5:08
  • @PardeepJain I've updated my question with the contents of my StoriesComponent
    – garethdn
    Commented Dec 21, 2015 at 9:36

2 Answers 2

15

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.

1
  • 3
    +1 for mentioning this fact - "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."
    – lame_coder
    Commented Jan 14, 2016 at 9:31
1

I made work the injection of RouteParams within Angular2 beta0. Which version do you use?

We simply need to specify route providers globally for your application as you did:

import {ROUTER_PROVIDERS} from 'angular2/router';
(...)
bootstrap(ApisparkApp, [
  (...)
  ROUTER_PROVIDERS
]);

Then simply import RouteParams where you want to use it and add it in the constructor of your component. Angular will give you the corresponding instance:

import { RouteParams } from 'angular2/router';

export class CompanyDetails implements OnInit {
  public company: Company;

  constructor(routeParams: RouteParams) {
    this.routeParams = routeParams;
  }
}

Since you specify it globally, you don't need to specify it again within the providers attribute of the component:

@Component({
  selector: 'company-details',
  providers: [ CompanyService ]
})

Otherwise, what do you exactly want to do with class URLSearchParams?

Hope it helps you, Thierry

2
  • 2
    Hi, thanks for responding. I'm using angular2": "2.0.0-beta.0. When I do exactly what you've done above with RouteParams I get No provider for RouteParams!. The only place I can access RouteParams is in a component that is specified in my @RouteConfig decorator. So this is problem 1. Problem 2 is injecting URLSearchParams. I want to access this in order to get and set parameters: angular.io/docs/ts/latest/api/http/URLSearchParams-class.html
    – garethdn
    Commented Dec 21, 2015 at 12:20
  • Updated post with plunker example
    – garethdn
    Commented Dec 21, 2015 at 12:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.