404 when requesting json file with Angular http

Question

I have this code in my service

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

and in my component I'm calling it:

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

But I'm getting 404 error

But I have this json file in the same folder where my service is.

What's wrong?

eko · Accepted Answer · 2017-01-20 19:29:01Z

1

You need to give the absolute path from your base path. Like, path/to/Services/client.json

Here's an example: https://plnkr.co/edit/60E2qb9gOjvkEAeR5CtE?p=preview

answered Jan 20, 2017 at 19:29

eko

40.8k11 gold badges79 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gsiradze Over a year ago

if I copy reference it's `src/app/Services/client' and If I enter that result is same. If I add .json at the end result is same

eko Over a year ago

@gsiradze is your base folder src? How about app/Services/client.json ?

eko Over a year ago

@gsiradze Glad I could help :-)

Vijay Gajera · Accepted Answer · 2017-07-09 06:39:23Z

0

If you using angular-cli Keep the json file inside Assets folder (parallel to app dir) directory

In your case you need to create file like assets/client.json

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

Note: here you only need to give path inside assets folder like assets/client.json then you need to write path like /client.json

If you using webpack then you need to follow above same structure inside public folder its similar like assets folder.

answered Jul 9, 2017 at 6:39

Vijay Gajera

1,37411 silver badges13 bronze badges

Comments

Nitin Wahale · Accepted Answer · 2018-06-29 13:03:51Z

0

Please add this code in file the typings.d.ts

declare module "*.json"
{ const value: any;
  export default value;
}
declare module "json!*"
{ const value: any;
  export default value;
}

and simply import using import * as data1 from 'path.json';

answered Jun 29, 2018 at 13:03

Nitin Wahale

1,6964 gold badges16 silver badges27 bronze badges

Collectives™ on Stack Overflow

404 when requesting json file with Angular http

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related