I am new to Angular 18
and have been trying to read a JSON
file using an observable with an HTTP
call. Despite following several online tutorials and forum solutions, I am still encountering issues.
My Setup
I created a service that makes an HTTP
request to read a JSON
file. I have verified that the path to the file is correct. However, I am not receiving any data, and I noticed that it says HttpClientModule
is deprecated.
Code Snippets
EmployeeService (employee.service.ts)
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { IEmployee } from './employeeInterface';
@Injectable({
providedIn: 'root'
})
export class EmployeeService {
private _dataUrl: string = '/assets/data/employees.json';
constructor(private http: HttpClient) { }
getEmployees(): Observable<IEmployee[]> {
return this.http.get<IEmployee[]>(this._dataUrl);
}
}
AppModule (app.module.ts)
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MyTestPageComponent } from './my-test-page/my-test-page.component';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { EmployeeDetailsComponent } from './employee-details/employee-details.component';
import { EmployeeService } from './employee.service';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
MyTestPageComponent,
EmployeeListComponent,
EmployeeDetailsComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [EmployeeService],
bootstrap: [AppComponent]
})
export class AppModule { }
EmployeeListComponent (employee-list.component.ts)
import { Component, OnInit } from '@angular/core';
import { IEmployee } from '../employeeInterface';
import { EmployeeService } from '../employee.service';
@Component({
selector: 'app-employee-list',
template: `
<h2>Employee List</h2>
<ul *ngFor="let employee of employeesList">
<li>{{ employee.name }}</li>
</ul>
`,
styles: []
})
export class EmployeeListComponent implements OnInit {
public employeesList: IEmployee[] = [];
constructor(private employeeService: EmployeeService) { }
ngOnInit(): void {
this.employeeService.getEmployees().subscribe(data => this.employeesList = data);
}
}
EmployeeInterface.ts
export interface IEmployee {
id: number;
name: string;
age: number;
}
Additional Information
The JSON file (employees.json) is located in src/assets/data and has the correct format. There are no errors in the console, but the data is not being fetched. I noticed a message indicating that HttpClientModule is deprecated, but I can't find any clear guidance on what to use instead.
I would appreciate any guidance or suggestions on how to resolve this issue. Thank you!
Please ensure that you configure the assets folder to allow accessing files & folders in the angular.json.
"assets": ["src/assets"]
Make sure your employees.json contains a JSON array.
[
{
"id": 1,
"name": "Emp One",
"age": 44
}
]
Besides, you are not using the employeeService
in your EmployeeListComponent
.
ngOnInit(): void {
this.employeeService
.getEmployees()
.subscribe((data) => (this.employeesList = data));
}