Angular 4 - HTTP 服务 404。未找到 JSON 文件

Question

我的 http 服务有问题。

我尝试的是 this.http.get('http://jsonplaceholder.typicode.com/posts/1') 作为示例数据并且它有效。但是当我使用 this.http.get('src/data/employees.json') 它显示 404(未找到)

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

如果您正在使用 angular cli，您必须通过在 .angular-cli.json 中设置它来输出您的 json 文件，如下所示:

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

但我建议在您的 src 文件夹中创建一个类似 data 的文件夹，并将所有数据 .json 归档到其中。然后让你的 assets 配置如下:

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

这样 cli 将始终输出整个 data 文件夹，因此您不必单独指定每个 .json 文件

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