Angular 5读取本地JSON文件失败求助：请求报错排查

Hey Pierre, let's troubleshoot this issue together—since you can access the JSON file directly in Chrome, the problem is likely a small configuration or code oversight. Here are the key fixes to try:

1. Ensure HttpClientModule is imported in your AppModule #

Angular 5 requires you to explicitly import HttpClientModule to use the HttpClient service. If you haven't done this, the injection will fail silently (or throw that vague object error). Update your app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import this module
import { AppComponent } from './app.component';
import { JsonDataService } from './path-to-your-service/json-data.service'; // Adjust the path to match your service location

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    HttpClientModule // Add this line to enable HttpClient
  ],
  providers: [JsonDataService], // Make sure your service is registered here
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Fix the request URL (use root-relative path) #

The relative path ./assets/... might cause issues depending on where your component is located. Instead, use a root-relative path (starting with /) to target the assets folder directly, which is more reliable:

public getDepartmentData(): Observable<any> {
  console.log('getDepartmentData');
  const apiUrl = '/assets/data/french-regions-departments.json'; // Remove the leading dot
  return this.httpClient.get(apiUrl);
}

3. Add proper error handling to see the real issue #

The generic [object Object] error doesn't give you enough details. Update your subscription to log specific error information—this will reveal if it's a 404 (path issue), JSON parsing error, or something else:

jsonDataService.getDepartmentData().subscribe(
  data => console.log('Success:', data),
  error => {
    console.error('Full error object:', error);
    console.error('Error status code:', error.status);
    console.error('Error message:', error.message);
  }
);

4. Validate your JSON file format #

Even if you can view it in Chrome, a tiny syntax error (like a missing comma or trailing comma) can cause HttpClient to fail parsing it. Copy your JSON content into a validator tool to confirm it's fully valid.

5. Double-check service provider setup #

In Angular 5, you can't use providedIn: 'root' (that was introduced in Angular 6), so make sure your JsonDataService is included in the providers array of your AppModule (as shown in step 1). If it's declared in a feature module, ensure that module is imported into AppModule.

Try these steps one by one—most likely the missing HttpClientModule or incorrect path is the culprit. Once you add the error handling, you'll get a clear picture of what's going wrong if the first fixes don't work.

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