Angular 4 - HTTP Service 404. JSON file Not Found

问题

I am new in angular, and I am having problem in http service. I tried 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();
    }

}

回答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

回答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.

回答3:

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

回答4:

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 /.

回答5:

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

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

来源：https://stackoverflow.com/questions/45931391/angular-4-http-service-404-json-file-not-found

标签

angular

angular-cli