json 파일에 대해 각도 2 http GET이 반환됩니다. 404

Question

각도 유니버설에서 백 엔드와 프런트 엔드간에 통신이 있음을 증명하기 위해 POC를 수행하고 있습니다. 백 엔드에서 heroes.json이라는 JSON 파일을 가지고 있는데 프런트 엔드 서비스 ModelService에서 검색하려면 model.service.ts을 입력하십시오. 내가 getStuff()라는 메소드의 일부 데이터를 얻을 수있는 HTTP 요청을 만들려면

model.service.ts (프론트 엔드) 내 :

나는이 폴더 구조를 가지고있다.

나는 model.service.ts이있다 :이 오류를 받고 있어요

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; 
     }); 
     } 

: 나는 ModelService.getHeroes를 호출하고 프런트 엔드 구성 요소에서

// 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); 
     } 

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은 무엇이겠습니까? 실제 실행중인 프로젝트, 출력, DIST에 있기 때문에 :

그래서 나는 ModelService.heroesUrl 무엇을 입력 모르겠어요. ModelService.heroesUrl에는 어떤 문자열 값이 필요합니까?

Answer 1

당신은 당신의 dist 폴더 클라이언트로 JSON 파일을 넣어 가지고 있고 http://localhost:4000/dist/heroes.json<-- destination where you are putting your json file in dist directory 내가 "assets" 폴더 내 같은 파일 places.json을 넣어

Answer 2

과 후 URL을 변경해야 할 설정 한 URL과 같은 :

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

희망이 정보는 누군가에게 도움이 되길 바랍니다.