Fetch data using HTTP in Angular

Question

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);
    }
}

I think you have two classes with same name EmployeeService — Azad
– Azad, Commented Apr 27, 2020 at 5:41
@Azad No, there's only one class with name "EmployeeService" — anonymous coder
– anonymous coder, Commented Apr 27, 2020 at 5:55

MrMalith · Accepted Answer · 2020-04-27 05:40:23Z

2

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

import employeeService

and add "EmployeeService" to the providers array

answered Apr 27, 2020 at 5:40

MrMalith

1,37215 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Fetch data using HTTP in Angular

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related