Angular 4: Async Pipe - не умеет читать JSON FILE

Question

Я работаю над демо для трубы Aysnc.Один из вызовов метода, предназначенный для чтения данных из файла JSON для книг.Но я получаю 404 за JSON.

Я добавил изображение папок проекта.У меня есть книжный сервис: -

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/observable';
import {Subscriber } from 'rxjs/Subscriber';

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { Book } from './book';

@Injectable()
export class BookService {
    url = 'http://localhost:4200/books/books.json';
    constructor(private http: Http) { }
    // Returns Observable<Book[]>
    getBooksWithObservable(): Observable<Book[]> {
        console.log('getBooksWithObservable()');
        return this.http.get(this.url).map((res: Response) => res.json());
    }
    // Returns Promise<Book[]>
    getBooksWithPromise(): Promise<Book[]> {
        return this.http.get(this.url).toPromise().then((res: Response) => res.json());
    }
    // tslint:disable-next-line:no-trailing-whitespace

    // Returns Observable<string>
    getCurrentTime(): Observable<string> {
        return new Observable<string>((observer: Subscriber<string>) => {
                    // 1 second interval
        setInterval(() => observer.next(new Date().toString()), 1000);
        });
    }

    // Returns Promise<Book>

    getBookSlowly(): Promise<Book> {
        return new Promise(resolve => {
        const book = new Book();
        book.id = 100;
        book.name = 'jQuery Tutorials';
            // Delay by 3 second
            setTimeout(() => resolve(book), 3000);
          });
    }
}

См. Следующее изображение для ошибки в Chrome: -

заранее спасибо.

Answer 1

Вы должны переместить свой файл в свой проект, попробуйте поместить его в активы

url = 'http://localhost:4200/assets/books/books.json';

или вам нужно добавить свой файл json в массив assets внутри angular-cli.json

"assets": [
        "assets",
        "favicon.ico",
        "books",
        "books/books.json"
    ]