CODEWITHSUNDEEP
angularangular-cli
edizonv
edizonv

Reputation: 449

Angular 4 - HTTP Service 404. JSON file Not Found

I am having problem in http service.

What i tried is this.http.get('http://jsonplaceholder.typicode.com/posts/1') as sample data and it works. But when I used this.http.get('src/data/employees.json') it shows me 404 (Not Found)

employees.service.ts

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class EmployeesService {
  constructor(private http: Http) {}

  getEmployees() {
    this.http
      .get('src/employees.json')
      .map((response) => response.json())
      .subscribe((result) => console.log(result));
  }
}

app.component.ts

import { Component } from '@angular/core';
import { EmployeesService } from './employees.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  constructor(private employeesService: EmployeesService) {}

  ngOnInit() {
    this.employeesService.getEmployees();
  }
}

Upvotes: 8

Views: 27004

Answers (5)

13hola
13hola

Reputation: 170

Put Your file into yourProject/src/assets folder and Give Path like /assets/yourFilename.json

Upvotes: 2

angularconsulting.au
angularconsulting.au

Reputation: 28279

If you are using angular cli you have to output your json file by setting that up in .angular-cli.json like so:

"assets": [
        "assets",
        "src/employees.json"
      ],

But I would recommend to create a folder like data inside your src folder and place all your data .json filed in to it. Then have your assets config like so:

"assets": [
        "assets",
        "data"
      ],

This way cli will alway output the whole data folder so you do not have to specify each .json file separately

In case if you changing .angular-cli.json during ng serve for your changes to take an effect you have to restart ng serve

Upvotes: 22

Carsten
Carsten

Reputation: 4208

Your file path is probably incorrect. hence the 404 NOT FOUND.

Try editing the path using ../ or ./ or ../../ etc

Upvotes: 0

Isaiah Lee
Isaiah Lee

Reputation: 448

looks like you're trying to access a file in the "src" directory, which is never made statically available.

If you need to access that json file directly, you need to make sure it's stored in the proper directory in the webserver that it can serve directly (this is usually done by configuring the static/serve settings on the backend).

Just because a file exists in your project folder doesn't mean the webserver makes all of it available.

Upvotes: 2

Max
Max

Reputation: 1210

You don´t have to navigate into your src folder. Just use this.http.get('employees.json') if the file is in your src folder or this.http.get('data/employees.json') if you have a data folder in your src folder.

This works because all the code you write in your components or services (or whereever) looks for path relative to your index.html if you omit a leading /.

Upvotes: 0

Related Questions