Question: I'm using Angular 2 Beta 5. Everytime I use RouteParams in my child component constructor it breaks my child component like:

```
import {Component, Inject, OnInit}  from 'angular2/core';
import {HeroService}   from './hero.service';
import {RouteParams} from 'angular2/router';
import {Hero} from './hero';

@Component({
    selector: 'my-hero',
    inputs: ['id'],
    template: `
  <h2>HEROES</h2>
  <div *ngIf="hero">
    <h3>{{hero.name}}</h3>
  </div>
  `
})
export class HeroComponent implements OnInit {
    hero: Hero;
    selectedId: number;

    constructor(private routeParams: RouteParams, @Inject(HeroService) private heroService: HeroService) {
        this.selectedId =  +this.routeParams.get('id');
    }

    ngOnInit() {
        this.hero = this.heroService.getHero(this.selectedId);
    }
}

```

I've tried using the following with no success:

```
constructor(private injector: Injector, @Inject(HeroService) private heroService: HeroService) {
    this.selectedId = this.injector.parent.get(RouteParams).get('id');
}

```

Answer: 
You need to provide `ROUTER_PROVIDERS`, either at bootstrap or in component's decorator:

```
bootstrap(AppCmp, [ROUTER_PROVIDERS]);
// or

@Component({
  providers: [ROUTER_PROVIDERS],
  ....
})

```
Thanks Sasxa, I added it on. I think what I am trying to do isn't possible with Angular 2. I resolved the RouteParams problem by removing the 

```
<my-hero></my-hero> 

```

selector from AppComponent. 

```
<router-outlet></router-outlet>

```

is where the child component is displayed. What I was trying to achieve was to have a list of generated router links in AppComponent relying on the RouteConfig of hero/:id to display the right hero in the child component but [routerLink]="['Hero']" broke the link. I'll leave the code to look at.

**app.html**

```
<div style="width:1000px;margin:auto">
    <h1 style="text-align:center">Angular 2 Routing and Navigation</h1>
    <div style="width:200px">
        <div style="text-align:center">
                <ul>
                    <li *ngFor="#hero of heroes">
                        <a [routerLink]="['Hero']">{{hero.name}}</a>
                    </li>
                </ul>
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

```

**app.component.ts**

```
import {Component, Inject} from 'angular2/core';
import {HeroService} from './heroes/hero.service';
import {Hero} from './heroes/hero';
import {HeroComponent} from './heroes/hero.component';
import {RouteConfig, ROUTER_PROVIDERS, ROUTER_DIRECTIVES, Router} from 'angular2/router';

@Component({
    selector: 'my-app',
    templateUrl: 'templates/app.html',
    providers: [
        ROUTER_PROVIDERS,
        HeroService
    ],
    directives: [ROUTER_DIRECTIVES, HeroComponent]
})
@RouteConfig([
    { path: '/hero/:id', name: 'Hero', component: HeroComponent }, ])

export class AppComponent {
    hero: Hero;
    heroes: Array<Hero>;

    constructor(private router: Router, @Inject(HeroService) public heroService: HeroService) {
    }

    ngOnInit() {
        this.heroes = this.heroService.getHeroes();
    }

    onselect(hero: Hero) {
        this.router.navigate(['Hero', { id: this.hero.id }]);
    }
}

```