How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?

Question

我一直在使用 Angular 2 文档中的英雄教程进行实验。但是，我已经到了我不明白这个错误发生了什么的地步：

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

涉及的两首曲子是HeroDetailComponent和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);
    }
}

当我使用这段代码时，它起作用了。但是当我切换构造函数，并使用带有 HeroService 注入的构造函数时，我得到了我之前提到的错误。

@Injectable()
export class HeroService {

    getHeroes() {
        return HEROES;
    }

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

当我试图弄清楚发生了什么时，我删除了所有与 promise 相关的代码。但是，我仍然遇到同样的错误。编译一切正常，只是运行时间错误。 HeroService 和 RouteParams 在父组件中提供。

两个问题：

如何解决这个问题？
如何调试此类问题？

我倾向于认为这是 Angular 2 中的错误，但我不确定如何确保这不是我的错误。提前致谢。

更新：

我已经添加了临时修复代码（它避免了注入，因此不是这个问题的解决方案，因为我想让注入正常工作）。
This is a Plunker 与我正在尝试的代码的近似版本。我无法正确地将其设置为运行，但通过查看代码可能有助于诊断问题。

Answer 1

在 "tsconfig.json" 中，将 "compilerOptions" 部分的 "emitDecoratorMetadata" 参数设置为 "true" 值。

Answer 2

尝试使用 "tsconfig.json" 中的这些编译器选项。它对我有用（angular 的 2.0.0-rc.1 版）。

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

我在注射剂方面遇到了同样的问题（同样的错误），修复对服务有效，但对 http 无效。我根据 ng-book2 的教程修改了我的选项，它终于奏效了。

Answer 3

就我而言，我使用 @Inject 装饰器解决了这个问题。试试这个：

import {Inject} from '@angular/core'

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

我的项目配置了 JSPM，这是使用依赖注入的唯一方法，我不知道为什么，有人有解释吗？

已编辑：我找到了解决方案。就我而言，我必须将此配置添加到 config.js 文件

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

现在我可以去掉@Inject装饰器，这句话就可以正常工作了

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

关键是emitDecoratorMetadata: true

Answer 4

RC1 的正确答案是在注入服务的任何地方添加 @Inject(Service) private service:Service。

这让我在周一升级到 RC1 后头疼不已。

Answer 5

当我像这样在构造函数中注入 FormBuilder 时，angular RC1 出现了这个错误：

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

但我以前没有import！只需添加它即可解决问题：

import { FormBuilder } from '@angular/common'

Answer 6

我看到以下问题：HeroComponent 依赖于 HeroDetailsComponent，但是 HeroDetailsComponent 在 app/heroes/index.ts 中导出 afterwards文件。

有人报告了这种设置的问题here

How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?

How to fix Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?

angular

angular2-services