각도 4 404 오류 - http get 메서드 각도 4 webpack을 사용하여 json 파일에 호출

Question

로컬 json 파일이 있는데 Http get 메서드에서 읽으려고합니다. 콘솔 (404)에서 예외를 throw하는 응용 프로그램입니다. webpack을 사용하면 angular-cli.json에 대한 애셋/데이터를 사용할 수 없습니다. 나는 webpack을 사용하고 있습니다. json 파일을 어디에 넣을 지 알고 있습니까?

import {IProduct} from './product.model'; 

@Injectable() 
export class ProductService { 
    private productUrl = require('./product.json'); 

    constructor(private _http: HttpClient) { } 

    getProducts(): Observable<IProduct[]> { 
     return this._http.get<IProduct[]>(this.productUrl) 
      .do((data) => console.log('products: ' + JSON.stringify(data))) 
      .catch(this.handleError); 
    } 
} 

여기서 product.json은 ProductService의 같은 디렉토리에 있습니다.

Answer 1

---

각 CLI

---

를 사용하여 AFAIK이 작업을 수행하는 하나 개의 방법이 있다면.

1. 파일 (예 : file.json)을 assets 폴더에 저장합니다.

2. angular-cli.json 파일에서 node : apps> assets로 이동하여 "assets"이름이 존재하는지 확인하십시오.

지금 액세스 :

http://localhost:[PORT_NUMBER]/assets/file.json

BTW, 웹 앱이 API를해서는 안됩니다. json 파일을 사용하는 대신 서비스에서 변수를 작성하십시오.

예 : 웹팩와

import { Injectable } from "@angular/core"; 

@Injectable() 
export class DataMockService { 
    public GetObjects(): any { 
     return { 
      name: "nilay", ... 
     }; 
    } 
} 

Answer 2

, 당신이 당신의 JSON 파일을 저장 한 상관없이, 당신은 어디에서 액세스하지만, 항상 src 폴더에서 시작 할 수 있습니다.

그래서 다음과 비슷한 모습이 될 것입니다

return this._http.get<IProduct[]>('src/app/services/product.json') 

즉은 src부터 시작하여 JSON 파일의 전체 경로를 표시합니다.