CODEWITHSUNDEEP
htmlangulartypescriptweb-services
anonymous coder
anonymous coder

Reputation: 27

Fetch data using HTTP in Angular

I am new to Angular and Http service. I created a employee-list comp and a service with the name employee.service.ts which makes an Http call. I also, mapped the observable correctly,

I also create a json file in assets with the name employee.json in which store my data. There's no any compilation errors. but It fails during runtime. I'm getting following error. 

NullInjectorError: R3InjectorError(AppModule)[EmployeeService -> EmployeeService -> EmployeeService]:

employee-list.component.html

<h2>Employee List</h2>
    <ul *ngFor="let employee of employees">
      <li>{{employee.name}}</li>
    </ul>

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IEmployee } from '../employee';
import { Observable } from 'rxjs';

@Injectable() export class EmployeeService{

    private _url: string ="/assets/data/employee.json";

    constructor(private http:HttpClient) {}

    getEmployees(): Observable<IEmployee[]>{
        return this.http.get<IEmployee[]>(this._url);
    }
}

employee-list.component.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { IEmployee } from '../employee';
import { Observable } from 'rxjs';

@Injectable() export class EmployeeService{

    private _url: string ="/assets/data/employee.json";

    constructor(private http:HttpClient) {}

    getEmployees(): Observable<IEmployee[]>{
        return this.http.get<IEmployee[]>(this._url);
    }
}

Upvotes: 2

Views: 64

Answers (1)

MrMalith
MrMalith

Reputation: 1372

error is pretty clear. you should have to provide employeeService in module.ts 

import employeeService

and add "EmployeeService" to the providers array

Upvotes: 2

Related Questions