Angular 2 http GET json 文件 returns 404

Question

我正在做一个 POC 来证明我在 Angular Universal 中的后端和前端之间有通信。我在后端有一个名为 heroes.json 的 JSON 文件，我想从 model.service.ts.

中的前端服务 ModelService 中检索它

我有这个文件夹结构：

在 model.service.ts（前端）中，我想创建一个 http 请求以在名为 getStuff() 的方法中获取一些数据。

我在 model.service.ts 中有这个：

// domain/feature service
@Injectable()
export class ModelService {
  private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file
   // This is only one example of one Model depending on your domain
  constructor(public api: ApiService, public cacheService: CacheService, private http: Http) {

  }

  public getStuff(): Observable<any[]> {
        return this.http.get(this.heroesUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }

    private extractData(res: Response) {
    let body = res.json();
    return body.data || { };
  }

    private handleError (error: Response | any) {
    // In a real world app, we might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || "";
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ""} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

    // domain/feature service
    @Injectable()
    export class ModelService {
      private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file
       // This is only one example of one Model depending on your domain
      constructor(public api: ApiService, public cacheService: CacheService, private http: Http) {

      }

      public getStuff(): Observable<any[]> {
            return this.http.get(this.heroesUrl)
                        .map(this.extractData)
                        .catch(this.handleError);
      }

        private extractData(res: Response) {
        let body = res.json();
        return body.data || { };
      }

        private handleError (error: Response | any) {
        // In a real world app, we might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
          const body = error.json() || "";
          const err = body.error || JSON.stringify(body);
          errMsg = `${error.status} - ${error.statusText || ""} ${err}`;
        } else {
          errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
      }

我从前端组件调用 ModelService.getHeroes:

export class HomeComponent {

      public data: any = {};
      constructor(public modelService: ModelService) {
        // we need the data synchronously for the client to set the server response
        // we create another method so we have more control for testing
        this.universalInit();
      }

      public universalInit() {

        this.modelService.getStuff().subscribe((data) => {
          this.data = data;
        });
      }

我收到这个错误：

GET /src/backend/heroes.json 404 3.698 ms - 46
404 -  {"status":404,"message":"No Content"}
EXCEPTION: 404 -  {"status":404,"message":"No Content"}

/private/var/root/vepo/node_modules/rxjs/Subscriber.js:227
            throw err;
            ^
404 -  {"status":404,"message":"No Content"}
[nodemon] app crashed - waiting for file changes before starting...

所以我在服务中的urlprivate heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file是错误的。鉴于该文件夹结构，url 是什么？因为实际的运行项目，输出，在 dist:

所以我不确定要在 ModelService.heroesUrl 中输入什么。 ModelService.heroesUrl 应该有什么字符串值？

Answer 1

您必须将 json 文件放入您的 dist 文件夹客户端，并且您必须将 url 更改为 http://localhost:4000/dist/heroes.json<-- destination where you are putting your json file in dist directory

Answer 2

我将相同的文件 places.json 放入 "assets" 文件夹在设置 url 之后：

places = this.http.request("http://localhost:4200/assets/places.json")

希望此信息对某些人有所帮助。

Answer 3

将包含模拟数据的目录添加到 angular-cli.json 中的 "assets" 部分。

Angular 2 http GET json 文件 returns 404

Angular 2 http GET for json file returns 404

angular-universal

angular