Angular 4 - HTTP Service 404. JSON file Not Found

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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