如何修复 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 2 文档中的 Heroes 教程进行实验.但是，我已经到了不明白这个错误发生了什么的地步:

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:

未捕获(承诺):类型错误:无法读取 browser_adapter.ts:88 中的 null 属性 'query'.

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

所涉及的两个部分是 HeroDetailComponent 和 HeroService.

The two pieces involved are the HeroDetailComponent and the 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 注入的构造函数时，我得到了我之前提到的错误.

When the I use this code, it works. But when I switch the constructors, and use the one with the HeroService injection, then I get the error I mentioned earlier.

@Injectable()
export class HeroService {

    getHeroes() {
        return HEROES;
    }

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

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

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 HeroService and RouteParams are provided in a parent component.

两个问题:

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

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

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.

更新:

1. 我添加了临时修复代码(它避免了注入，因此不是这个问题的解决方案，因为我希望注入正常工作).

1. 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).

这是一个 Plunker 代码的近似版本我'我在努力.我无法让它正常运行，但通过查看代码来诊断问题可能会有所帮助.

This is a Plunker 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.

推荐答案

我看到以下问题:HeroComponent 依赖于 HeroDetailsComponent，但是 HeroDetailsComponent> 之后导出到app/heroes/index.ts文件中.

I see the following problem: HeroComponent depends on HeroDetailsComponent, but HeroDetailsComponent is exported afterwards in the app/heroes/index.ts file.

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

Someone reported a problem with this kind of set up here

这篇关于如何修复 Angular 2 `Uncaught (in promise): TypeError: Cannot read property 'query' of null`?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！