Trying to use RouteParams to get query-string parameters, but I just get the error
Cannot resolve all parameters for 'RouteParams'(?). Make sure that all
the parameters are decorated with Inject or have valid type
annotations and that 'RouteParams' is decorated with Injectable.
angular2-polyfills.js:332 Error: Cannot read property 'getOptional' of
undefined.......
Check out this Plnkr. How can I use RouteParams without getting this warning?
The 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 am not having any routes, I just have the default root route (if that can be called a route at all when I have no other routes...). But as suggested by Gianluca, I added the following route config:
@RouteConfig([
{ path: '/:guid', name: 'Home', component: AppComponent, useAsDefault: true },
])
But I still get the same error (the Plnkr is updated)...
Günter Zöchbauer :
Remove RouteParams from\n\nbootstrap(AppComponent, [ROUTER_PROVIDERS, RouteParams]);\n\n\nRouteParams is provided by the router. If you provide it yourself injecting it fails.\n\nSee https://angular.io/api/router/Params for an example. RouteParams can only be injected on components added by the router.\n\nPlunker example",
2016-04-08T11:29:56
EricC :
After seeing the correct and accepted answer to Günter, I wanted to add an answer of my own (I asked the original question).\n\nThis is really overkill for my case: I have no routing (I have only a single page single page application), so I must:\n\n\nbring in another \"external\" component (RouteConfig)\ncreate a dedicated component with the router config and router base template (with <router-outlet></router-outlet>)\ninject RouteParams in the component where I want to use the query string parameter\n\n\nAnd then finally I am able to the query string parameter...\n\nIn my case (with just one parameter), I just instead did this one-liner (spread over 4 lines for easy reading):\n\nthis.myParameter = window.location.href\n .slice(window.location.href.indexOf('?') + 1)\n .split('&')[0]\n .split('=')[1];\n",
2016-04-08T13:15:38
Gianluca Solinas :
Have you specified guid in the @RouteConfig?\n\n@RouteConfig([\n {path: '/something/:guid', name: 'Something', component: Something}\n])\n",
2016-04-08T10:05:50