2017-11-06 1 views
1

나는 여러 가지 새로운 튜토리얼을 사용하고 있습니다. 한 지점에 서서 더 이상 갈 수 없어 내 문제는 json 파일 제품과 같습니다. json과 나는 Http 메소드를 읽으려고하는데, 아래에 언급 된 콘솔에서 예외를 던지는 애플리케이션이다.각도 2 404 - http를 사용하여 json 파일을 읽을 수 없습니다.

GET http://localhost:4200/api/products.json 404 (Not Found) 

아래 여기 내 TS 코드 내 애플 리케이션 구조

Structure of my application

입니다.

import { Injectable } from "@angular/core"; 
import { IProduct } from "./product"; 
import { Http, Response } from "@angular/Http"; 
import { Observable } from "rxjs/Observable"; 

import "rxjs/add/operator/map"; 
import "rxjs/add/operator/do"; 
import "rxjs/add/operator/catch"; 


@Injectable() 
export class ProductService { 

    private _productUrl: string = "../data/products/products.json"; 


    constructor(private _http: Http){} 

    getProducts():Observable< IProduct[]> { 
     return this._http.get("/api/products.json") 
        .map((response: Response) => <IProduct[]>response.json()) 
        .do(data => console.log('All: ' + JSON.stringify(data))) 
        .catch(this.handleError); 
    } 

    handleError(error: Response) { 
     console.log(error); 
     return Observable.throw(error.json().error || 'system error'); 
    } 
} 

내가 잘못하면 알려주세요. 미리 감사드립니다. !

+0

URL ('http : // localhost : 4200/api/products.json')을 브라우저의 주소 표시 줄 (각도 외)에 직접 입력하면 어떻게됩니까? 아마 404라고 추측합니다. – Igor

+0

맞아요. 정확하게 404가 생겼어요. 각도가 새 것이기 때문에 잘 작동하지 않을 거예요. – MussadiqChhipa

+1

요점은 각도와 관련이 없다는 것입니다. 주소 표시 줄을 사용하여 브라우저에서 파일을 가져올 수 없다면 프로그래밍 방식으로 어떻게 할 수 있습니까? – Igor

답변

3

OUT-의 자산에 API를 폴더를 추가 할 필요가 CLI로 빌드 된 앵귤러 프로젝트의 기본 기능으로 /src/assets에있는 자산 폴더를 통해 파일에 공개적으로 액세스 할 수 있습니다. angular-cli.json 파일을 편집하여 다른 위치에 공개적으로 액세스 할 수 있도록 프로젝트를 구성 할 수 있습니다. 라인 assets을 찾아 문제의 파일 (들)에 대한 액세스를 허용하는 방법으로 그것을 수정하는 데 도움이

"assets": ["assets", "products.json","api/products.json"], 

희망을!

+0

대단히 고마워요, 매력처럼 작동합니다. – MussadiqChhipa

0

/api/products.json에 노출되는 API가 없으므로이 URL에서이 파일에 액세스 할 수 없습니다.

당신이 직접 파일에 액세스를 시도 할 수 있습니다 : 당신은 CLI를 사용하는 경우

this._http.get(_productUrl) 
0

당신이 angular-cli.json 파일

"assets": [ 
    "assets", 
    "favicon.ico", 
    "api" 
    ], 
관련 문제