I am trying to implement a service in Angular 2.
Service:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { BrowserModule } from '@angular/platform-browser';
@Injectable()
export class DemoService {
constructor(private http: HttpClient
) { }
GetData(): Observable<String> {
const baseUrl = 'http://localhost:54037/api/home'; // this part will come from config file in futer
// const url = '?resourceId=' + primaryId + '&showDate=' + selectedDate;
// http://localhost:55174/api/Resource?resourceId=3&showDate=2017-06-06
return this.http
.get<String>(baseUrl);
}
}
Component:
import { Component, OnInit } from '@angular/core';
import { DemoService } from './app.service';
import { BrowserModule } from '@angular/platform-browser';
@Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent implements OnInit {
constructor(private s: DemoService){}
name = 'Angular 2';
ngOnInit(){
console.log("Inidialization completed");
}
}
Everything works fine but as soon as I create an instance of service in constructor under component class, I get an error at the console.
Error loading http://localhost:3002/node_modules/@angular/common/bundles/common.umd.js/http as "@angular/common/http" from http://localhost:3002/app/app.service.js
If I remove constructor part, I get output.
I need to create an instance of Constructor and then call service.
Am I doing anything wrong?
Importing HttpModule in app.module like below
and
Importing Http in service as below
solved the problem.