Angular技术求助：Property 'json'不存在于type object类型报错

Hey there! Let's break down this error you're hitting—it's super common for Angular beginners making the jump to newer versions of the framework.

What's Causing the Error? #

Angular 4.3+ introduced the HttpClientModule (replacing the old HttpModule), and a key change here is that HttpClient automatically parses JSON responses for you. That means the .json() method you're trying to call on the response object doesn't exist anymore—because the response is already a parsed JavaScript object, not a raw JSON string.

How to Fix It #

Let's walk through the changes you need to make, using your code as a reference:

1. Update Your Service to Use HttpClient

First, make sure your DataContinentsService is using the modern HttpClient instead of the old Http:

// dataContinents.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'; // Use HttpClient, not Http

@Injectable({
  providedIn: 'root'
})
export class DataContinentsService {
  constructor(private http: HttpClient) { }

  getContinents() {
    // HttpClient returns the parsed JSON directly—no extra parsing needed
    return this.http.get('your-api-endpoint-url');
  }
}

2. Clean Up Your Component Code

In your continents.component.ts, remove the .map(res => res.json()) call entirely. Since the service already returns a parsed object, you can subscribe directly:

import { Component, OnInit } from '@angular/core';
import { DataContinentsService } from '../../services/dataContinents.service';
// You can remove this import unless you need map for other transformations:
// import 'rxjs/add/operator/map'; 

@Component({
  selector: "app-continents",
  templateUrl: "./continents.component.html",
  styleUrls: ["./continents.component.css"]
})
export class ContinentsComponent implements OnInit {
  continents: any[] = [];

  constructor(private dataContinentsService: DataContinentsService) { }

  ngOnInit() {
    this.dataContinentsService.getContinents()
      .subscribe(continents => {
        this.continents = continents;
        console.log('Loaded continents:', continents);
      }, error => {
        console.error('Error fetching data:', error);
      });
  }
}

3. Don't Forget to Import HttpClientModule

Make sure you've added HttpClientModule to your root AppModule—this is required for HttpClient to work:

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http'; // Import this
import { ContinentsComponent } from './continents/continents.component';

@NgModule({
  declarations: [ContinentsComponent],
  imports: [BrowserModule, HttpClientModule], // Add to imports array
  providers: [],
  bootstrap: [ContinentsComponent]
})
export class AppModule { }

Why This Works #

The old Http module returned a raw Response object that required you to call .json() to parse it. HttpClient eliminates that step by automatically parsing the JSON response into a JavaScript object, so trying to call .json() on it throws the error you're seeing.

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