404 vid begäran av JSON-fil med Angular http

Jag har den här koden i min tjänst

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/map';
import {Client} from "../clients/client";
import {Observable} from "rxjs/Observable";


@Injectable()
export class ClientsService {


  private clientUrl = './client.json';

  private headers = new Headers({ 'Accept': 'application/json' });
  private options = new RequestOptions({ headers: this.headers });

  private client : Client;

  constructor(private http:Http) {}

  getClient() : Observable<any>{
    return this.http.get(this.clientUrl, this.options)
      .map(res => res);
  }
}

och i min komponent anropar jag det:

this.client = this.clientsService.getClient()
  .subscribe(data => {
    console.log(data);
  });

Men jag får 404-fel

Men jag har den här json-filen i samma mapp där min tjänst är.

Vad är fel?

Svar #1

Du behöver ange hela sökvägen från din basväg. Som, path/to/Services/client.json

Här är ett exempel: https://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=preview

Svar #2

Om du använder angular-cli, håll json-filen inne i Assets-mappen (parallellt med app-katalogen)

I ditt fall behöver du skapa en fil som assets/client.json

return this.http.get('/client.json'))
    .map((response: Response) => {
        console.log("mock data" + response.json());
        return response.json();
    }
    )
    .catch(this.handleError);
}

Obs: här behöver du endast ange sökvägen inom assets-mappen som assets/client.json och sedan behöver du skriva sökvägen som /client.json

Om du använder webpack måste du följa samma struktur ovan i mappen public, det är liknande som mappen assets.

Relaterade artiklar