title: How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?
body: <p>I've been using the Heroes tutorial in the Angular 2 docs to experiment. However, I've come to a point that I don't understand what's happening with this error:</p>
  
  <p><code>Uncaught (in promise): TypeError: Cannot read property 'query' of null</code> in <code>browser_adapter.ts:88</code>.</p>
  
  <p>The two pieces involved are the <code>HeroDetailComponent</code> and the <code>HeroService</code>.</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core'; 
  import { RouteParams } from '@angular/router-deprecated';
  
  import { Hero, HeroService } from '../index';
  
  @Component({
      selector: 'my-hero-detail',
      templateUrl: ...
      styleUrls: [...]
  })
  export class HeroDetailComponent implements OnInit {
  
      hero: Hero;
  
      // TEMPORARY FIX:
      _heroService = new HeroService();  // Avoids injection
  
      // constructor(private _heroService: HeroService,
      //             private _routeParams: RouteParams) {}
  
      constructor(private _routeParams: RouteParams) {}
  
      ngOnInit() {
          let id = +this._routeParams.get('id');
          console.log(id);
      }
  }
  </code></pre>
  
  <p>When the I use this code, it works. But when I switch the constructors, and use the one with the <code>HeroService</code> injection, then I get the error I mentioned earlier.</p>
  
  <pre><code>@Injectable()
  export class HeroService {
  
      getHeroes() {
          return HEROES;
      }
  
      getHero(id: number) {
          return new Hero(1, 'Name', 'Power', 'AlterEgo');
      }
  }
  </code></pre>
  
  <p>While I was trying to figure out what's going on I removed all the promise-related code. However, I still get the same error. Everything is compiling fine, it's a runtime error. The <code>HeroService</code> and <code>RouteParams</code> are provided in a parent component.</p>
  
  <p>Two questions:</p>
  
  <ol>
  <li>How to solve this issue?</li>
  <li>How to debug this kind of problems?</li>
  </ol>
  
  <p>I'm inclined to think it's a bug in Angular 2, but I'm not sure how make sure that it's not an error on my part. Thanks in advance.</p>
  
  <p>UPDATES:</p>
  
  <ol>
  <li><p>I've added the the temporary fix code (which avoids injection and thus is not a solution to this question as I would like to have injection working properly).</p></li>
  <li><p><a href="http://plnkr.co/edit/nnqS3x2jbScZG0zd8CXI?p=preview" rel="noreferrer">This is a Plunker</a> with an approximate version of the code I'm trying. I couldn't get it to run properly, but it may be helpful to diagnose the problem by looking into the code.</p></li>
  </ol>