Ответ 1
Я вижу следующую проблему: HeroComponent
зависит от HeroDetailsComponent
, но HeroDetailsComponent
экспортируется впоследствии в файле app/heroes/index.ts
.
Кто-то сообщил о проблеме с таким видом здесь
Я использовал учебник Heroes в 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');
}
}
Пока я пытался выяснить, что происходит, я удалил весь код, связанный с обещаниями. Тем не менее, я по-прежнему получаю ту же ошибку. Все компилируется отлично, это ошибка времени выполнения. HeroService
и RouteParams
предоставляются в родительском компоненте.
Два вопроса:
Я склонен думать, что это ошибка в Angular 2, но я не уверен, как убедиться, что это не ошибка с моей стороны. Спасибо заранее.
ОБНОВЛЕНИЕ:
Я добавил код временного исправления (который позволяет избежать инъекций и, следовательно, не является решением этого вопроса, поскольку я хотел бы, чтобы инъекция работала должным образом).
Это Plunker с приблизительной версией кода, который я пытаюсь. Я не мог заставить его работать правильно, но может быть полезно диагностировать проблему, просмотрев код.
Я вижу следующую проблему: HeroComponent
зависит от HeroDetailsComponent
, но HeroDetailsComponent
экспортируется впоследствии в файле app/heroes/index.ts
.
Кто-то сообщил о проблеме с таким видом здесь
В "tsconfig.json" установите параметр "emitDecoratorMetadata" раздела "compilerOptions" в значение "true".
Я получил эту ошибку с angular RC1, когда я ввел FormBuilder
внутри конструктора следующим образом:
export class App {
constructor(public formBuilder: FormBuilder) {}
}
Но я раньше этого не делал import
!
Просто добавьте его, решив проблему:
import { FormBuilder } from '@angular/common'
Попробуйте использовать эти compilerOptions в "tsconfig.json". Он работал у меня (версия 2.0.0-rc.1 из angular).
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"noLib": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true },
У меня была та же проблема с инъекциями (такая же ошибка), и исправление делало трюк для служб, но не для http. Я изменил свои параметры на основе учебника от ng-book2, и он наконец-то сработал.
В моем случае я исправляю эту проблему, используя @Inject
decorator. Попробуйте следующее:
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
Правильный ответ с RC1 заключается в том, чтобы добавить @Inject(Service) private service:Service
, где бы вы не вводили инъекции.
Это не вызвало у меня головной боли после того, как я обновился в понедельник до RC1.