Angular 2 error: cannot resolve all parameters for 'RouteParams'

Question

Trying to use RouteParams to get query string parameters, but I just get an error

Unable to resolve all parameters for "RouteParams" (?). Make sure all parameters are decorated with Inject or have a valid annotation type and that "RouteParams" is decorated with Injectable. angular2 -polyfills.js: 332 Error: cannot read property 'getOptional' undefined .......

Take a look at Plnkr . How can I use RouteParams without warning?

Important files are:

boot.ts :

 import {bootstrap} from 'angular2/platform/browser'; import {ROUTER_PROVIDERS, RouteParams} from 'angular2/router'; import {AppComponent} from './app/app.component'; bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]); 

and app.component.ts :

 import {Component, OnInit} from 'angular2/core'; import {RouteParams} from "angular2/router"; @Component({ selector: 'app', template: ` <p *ngIf="guid">guid gived is: {{guid}}</p> <p *ngIf="!guid">No guid given in query-string in URL</p> ` }) export class AppComponent implements OnInit { guid:string; constructor(private _params: RouteParams) {} // ngOnInit() { this.guid = this._params.get('guid'); } } 

Update:

I have no routes, I just have a default root route (if you can call it a route at all, when I have no other routes ...). But, as Gianluca suggested, I added the following route configuration:

 @RouteConfig([ { path: '/:guid', name: 'Home', component: AppComponent, useAsDefault: true }, ]) 

But I still get the same error ( Plnkr updated) ...

Answer 1

Remove RouteParams from

 bootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]); 

RouteParams provided by the router. If you provide it yourself, then it does not work.

See https://angular.io/api/router/Params for an example. RouteParams can only be entered on components added by the router.

Plunger example

Answer 2

Seeing the correct and accepted answer to Gunther, I wanted to add my answer (I asked the original question).

This is really redundant for my case: I have no routing (I have a one-page, one-page application), so I have to:

• enter another "external" component (RouteConfig)
• create a dedicated component with a router configuration and a basic router template (with <router-outlet></router-outlet> )
• enter RouteParams in the component where I want to use the query string parameter

And then finally, I can set the query string parameter ...

In my case (with only one parameter) I just made this one line (for easier reading):

 this.myParameter = window.location.href .slice(window.location.href.indexOf('?') + 1) .split('&')[0] .split('=')[1]; 

Answer 3

Did you specify guid in @RouteConfig?

 @RouteConfig([ {path: '/something/:guid', name: 'Something', component: Something} ]) 

Answer 4

I do not understand you correctly, but yes, as you said in the comment

Is there any other way to get url request parameters?

With what we can send using the data property, we can send data through routing using the @RouteConfig annotation data property provided by angualr2. using this property, we can send additional data to components during route setup without showing it in the URL. here is an example of this property.

 @RouteConfig([ {path: '/product/:id', component: ProductDetailComponentParam, as: 'ProductDetail', data: {isProd: true}}]) export class ProductDetailComponentParam { productID: string; constructor(params: RouteParams, data: RouteData) { this.productID = params.get('id'); console.log('Is this prod environment', data.get('isProd')); } } 

using this, we can send data through routing without specifying in the url. Plunker - a working example of the same

for more information read this amazing artistic

see also -

• Router parameter in Angular2