Angular 18中使用HttpClient无法从JSON文件获取数据的问题

我是Angular 18新手，尝试用HTTP结合Observable读取本地JSON文件，跟着多篇教程和论坛方案操作后还是没成功。

我的配置 #

我写了一个发起HTTP请求的服务来读取JSON文件，已经确认文件路径正确，但就是拿不到数据，另外还发现HttpClientModule被标记为弃用。

代码片段 #

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

补充信息 #

• JSON文件employees.json放在src/assets/data目录，格式完全正确
• 浏览器控制台没有任何错误提示，但数据就是加载不出来
• 已经注意到HttpClientModule的弃用提示，但没找到明确的替代方案

解决建议 #

1. 替换弃用的HttpClientModule #

Angular 18中HttpClientModule已被弃用，改用provideHttpClient()在应用配置中注册HTTP服务。修改main.ts：

import { bootstrapApplication } from '@angular/platform-browser';
import { provideHttpClient } from '@angular/common/http';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient()
  ]
});

同时可以移除AppModule中imports里的HttpClientModule，以及providers里的EmployeeService（因为你的服务已经用providedIn: 'root'，不需要在模块里重复注册）。

2. 排查数据加载问题 #

检查请求是否发送

打开浏览器开发者工具的Network标签，过滤XHR请求，看是否有/assets/data/employees.json的请求：

• 如果没有请求：确认组件是否被正确渲染（比如在AppComponent模板里是否添加了<app-employee-list></app-employee-list>）
• 如果请求返回404：确认文件路径是否正确，注意Angular打包后assets目录会被保留，路径开头的/是相对于应用根目录的，也可以尝试用相对路径./assets/data/employees.json测试

订阅时添加错误处理

在组件的订阅里加上错误回调，排查是否有隐藏错误：

ngOnInit(): void {
  this.employeeService.getEmployees().subscribe({
    next: data => this.employeesList = data,
    error: err => console.error('加载数据失败:', err)
  });
}

确认JSON格式匹配接口

确保employees.json的结构和IEmployee接口完全一致，比如：

[
  {
    "id": 1,
    "name": "张三",
    "age": 30
  },
  {
    "id": 2,
    "name": "李四",
    "age": 28
  }
]

检查Angular配置

确认angular.json里的assets配置包含src/assets（默认是包含的，但可以检查一下）：

"assets": [
  "src/favicon.ico",
  "src/assets"
]

内容的提问来源于stack exchange，提问作者Abdul