如何修复Angular 2中的`Uncaught (in promise): TypeError: Cannot read property 'query' of null`错误？

Question

我一直在尝试使用 Angular 2 文档中的 Heroes 教程进行实验。然而，我遇到了一个错误，不理解其中的原因：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 在父组件中提供。

两个问题：

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

我倾向于认为这是 Angular 2 中的一个 bug，但我不确定如何确保这不是我的错误。提前感谢您的帮助。

更新：

1. 我已添加临时修复代码（避免注入，因此不是此问题的解决方案，因为我想让注入正常工作）。

2. 这是一个 Plunker，其中包含我正在尝试的代码的近似版本。我无法使其正常运行，但通过查看代码可能有助于诊断问题。

- Omar Trejo

---

您似乎没有提供“HeroService”。它是否在父组件中提供？ - Te-jé Rodgers

是的，它在父组件中提供。谢谢。我会将其添加到问题描述中。 - Omar Trejo

啊，也许需要一个复制这个问题的 Plunkr。 - Te-jé Rodgers

我猜测你缺少了HeroService或者RouteParams的引入。你使用的是哪个版本的Angular2？如果你使用的是rc.x版本，请参考https://dev59.com/y5bfa4cB1Zd3GeqPxK-I - Günter Zöchbauer

我一直在尝试创建一个Plunker，但是我还没有能够使它正常工作，但您可能会得到这个想法，所以我将其放在问题中。感谢您的建议。 - Omar Trejo

HeroService和RouteParams都被导入到文件中，并在组件链中的更高级组件中注入了@GünterZöchbauer。 - Omar Trejo

Answer 1

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

有人在这里报告了这种设置的问题。

- Martín Coll

---

谢谢！这个解决方案对我很有帮助。我从来没有想过这可能是问题的原因。我可能需要更深入地学习JavaScript的内部机制。 - Omar Trejo

我花了很多时间才找到这个。我们都在学习！ 现在我花了很多时间浏览Github问题，因为我正在尝试许多beta产品（angular2，.net core，bootstrap4等）。当你卡住时，在那里搜索真的很值得。 - Martín Coll

Answer 2

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

- kotelok

---

emitDecoratorMetadata 已经设置为 true。无论如何还是谢谢。 - Omar Trejo

Answer 3

当我像这样在构造函数中注入FormBuilder时，我在使用angular RC1时遇到了这个错误：

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

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

import { FormBuilder } from '@angular/common'

- bertrandg

---

谢谢。不过，导入语句已经存在（请参见问题中的代码）。 - Omar Trejo

Answer 4

截至RC1版本，正确的做法是在注入服务的地方添加@Inject(Service) private service:Service。

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

- Erik Van Norstrand

---

当@Inject(...)的参数与参数类型相同时，不应该需要使用@Inject()。根本原因似乎是其他问题。 - Günter Zöchbauer

Answer 5

在我的情况下，我使用@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

- rulusoft

---

谢谢，但是它没有起作用。装饰器元数据已经被发出，而注入部分工作正常。 - Omar Trejo

Answer 6

尝试在“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中的教程修改了我的选项，最终解决了问题。

- GizmoW

---

请在您的答案中添加一些解释。 - André Kool

那些设置与我的唯一不同之处在于 "noLib":false 和 "declaration:false"，但是对我来说并没有解决问题。不管怎样还是谢谢@GizmoW。 - Omar Trejo