Угловой 2 http GET для возврата файла json 404

Question

Я делаю POC, чтобы доказать, что у меня есть связь между задним концом и передним концом в Angular Universal. У меня есть JSON-файл в задней части, называемый heroes.json, который я хочу получить из службы ModelService в model.service.ts.

У меня есть эта структура папок:

В пределах 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... 

Так что мой url private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file в служебной программе неправ. Учитывая, что структура папок, каков будет url? Поскольку фактический ход проекта, выход, находится в дист:

Так что я не уверен, что положить в ModelService.heroesUrl. Какое строковое значение должно иметь значение ModelService.heroesUrl?

Answer 1

вы должны поместить файл JSON в вас DIST клиента папку, и вы должны изменить свой адрес, чтобы 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") 

надеюсь, что эта информация поможет кому-то.