Come risolvere Angular 2 `Uncaught (promesso): TypeError: Impossibile leggere la proprietà 'query' di null`?

Question

Sto usando il tutorial Heroes nei documenti Angular 2 per sperimentare. Tuttavia, sono arrivato a un punto che non capisco cosa sta succedendo con questo errore:

Uncaught (in promise): TypeError: Cannot read property 'query' of null in browser_adapter.ts:88.

I due pezzi coinvolti sono lo HeroDetailComponent e lo HeroService.

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); 
    } 
} 

Quando uso questo codice, funziona. Ma quando cambio i costruttori, e uso quello con l'iniezione HeroService, ricevo l'errore che ho menzionato prima.

@Injectable() 
export class HeroService { 

    getHeroes() { 
     return HEROES; 
    } 

    getHero(id: number) { 
     return new Hero(1, 'Name', 'Power', 'AlterEgo'); 
    } 
} 

Mentre cercavo di capire cosa sta succedendo ho rimosso tutto il codice relativo alla promessa. Tuttavia, ho ancora lo stesso errore. Tutto sta compilando bene, è un errore di runtime. Il HeroService e RouteParams sono forniti in un componente padre.

due domande:

1. come risolvere questo problema?
2. Come eseguire il debug di questo tipo di problemi?

Sono propenso a pensare che sia un bug in Angular 2, ma non sono sicuro di come sia sicuro che non sia un errore da parte mia. Grazie in anticipo.

AGGIORNAMENTI:

1. ho aggiunto il codice della soluzione temporanea (che evita l'iniezione e, quindi, non è una soluzione a questo problema, come mi piacerebbe avere l'iniezione funziona correttamente).

2. This is a Plunker con una versione approssimativa del codice che sto provando. Non riuscivo a farlo funzionare correttamente, ma potrebbe essere utile diagnosticare il problema esaminando il codice.

Answer 1

vedo il seguente problema: HeroComponent dipende HeroDetailsComponent, ma HeroDetailsComponent viene esportato poi nel file app/heroes/index.ts.

Qualcuno ha segnalato un problema con questo tipo di set up here

Answer 2

Nella "tsconfig.json" impostare il parametro "emitDecoratorMetadata" della sezione "compilerOptions" per il valore "vero".

Answer 3

Provare con questi compilerOpzioni in "tsconfig.json". Ha funzionato per me (versione 2.0.0-rc.1 di angolare).

"compilerOptions": { 
    "target": "es6", 
    "module": "commonjs", 
    "declaration": false, 
    "noImplicitAny": false, 
    "removeComments": true, 
    "noLib": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true }, 

Ho avuto lo stesso problema con sostanze iniettabili (lo stesso errore) e la correzione ha fatto il trucco per i servizi, ma non per http. Ho modificato le mie opzioni sulla base di un tutorial di ng-book2 e alla fine ha funzionato.

Answer 4

Nel mio caso, ho risolto questo problema utilizzando il decoratore @Inject. Prova questo:

import {Inject} from '@angular/core' 

constructor(@Inject(HeroService) private _heroService: HeroService, 
      @Inject(RouteParams) private _routeParams: RouteParams) {} 

Il mio progetto è configurato con JSPM e questo è l'unico modo per lavorare con l'iniezione di dipendenza, non lo faccio perché, qualcuno ha una spiegazione?

Modificato: ho trovato la soluzione. Nel mio caso, devo aggiungere questa configurazione in configurazione.js file di

System.config({ 
baseURL: "", 
defaultJSExtensions: true, 
transpiler: "typescript", 
typescriptOptions: { 
    "target": "es5", 
    "emitDecoratorMetadata": true 
}, 
paths: { 
    "npm:*": "jspm_packages/npm/*", 
.... 

Ora posso rimuovere @Inject decoratore e questa frase funziona correttamente

constructor(private _heroService: HeroService, 
      private _routeParams: RouteParams) {} 

La chiave è emitDecoratorMetadata: true

Answer 5

La risposta corretta a partire dal RC1 è quello di aggiungere il @Inject(Service) private service:Service ovunque ci si trovi iniettare servizi.

Questo non mi ha causato mal di testa dopo l'aggiornamento di lunedì a RC1.

Answer 6

ho ottenuto questo errore con la RC1 angolare quando stavo iniettando FormBuilder dentro il costruttore in questo modo:

export class App { 
    constructor(public formBuilder: FormBuilder) {} 
} 

ma non ho import in precedenza! Basta aggiungere risolve il problema:

import { FormBuilder } from '@angular/common'