After injecting a service that makes an http.get request into a component, I encountered an error. The component rendered fine initially, but the service injection triggered an exception.
The error message states: EXCEPTION: Can't resolve all parameters for TooltipService: (?).
To troubleshoot, I included bootstrap as I suspect it may be a DI issue.
import { Component, Input } from '@angular/core';
import { TooltipService } from '../../services/tooltip/tooltip.service';
@Component({
..,
..,
providers: [TooltipService]
})
export class TooltipComponent implements OnInit {
@Input() explaination: boolean;
@Input() nodeId: number;
@Input() questionId: number;
constructor(public tooltipService: TooltipComponent) {}
ngOnInit() {
if(this.explaination) {
this.tooltipService.getExplaination(this.nodeId, this.questionId)
.then(response => console.log(response));
}
}
}
-
import { Http } from '@angular/http';
import { Injectable } from '@angular/core';
import 'rxjs/add/operator/toPromise';
@Injectable()
export class TooltipService {
constructor(public http: HTTP) {}
getExplaination(private nodeId: number, private questionId: number) {
let url = `someUrl/` + questionId + `/` + nodeId;
return this.http.get(url)
.toPromise()
.then(response => response.json())
.catch(this.handleError);
}
}
-
import { bootstrap } from '@angular/platform-browser-dynamic';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
import { HTTP_PROVIDERS } from '@angular/http';
import {AppComponent} from '../app/components/app/app.component';
bootstrap(AppComponent, [
HTTP_PROVIDERS,
disableDeprecatedForms(),
provideForms()
])
.catch((err: any) => console.error(err));