JSONサーバーを使用して角度4アプリを実行

Question

コーディングされたJSONサーバーを使用しようとしているときに、Angular 4アプリケーションを実行しようとしています。私が抱えている問題は、4200番ポートで実行されているAngular 4アプリケーションが同時にポート3000でJSONサーバーと通信できる方法がわからないことです。アプリはCRUDの例ですが、何かを追加しようとすると何も表示されません。

これは私のarticle.service.tsです：

@Injectable() 
export class ArticleService { 
    //URL for CRUD operations 
    articleUrl = "http://localhost:3000/articles"; 
    //Create constructor to get Http instance 
    constructor(private http:Http) { 
    } 
    //Fetch all articles 
    getAllArticles(): Observable<Article[]> { 
     return this.http.get(this.articleUrl) 
       .map(this.extractData) 
       .catch(this.handleError); 

    } 
    //Create article 
    createArticle(article: Article):Observable<number> { 
     let cpHeaders = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: cpHeaders }); 
     return this.http.post(this.articleUrl, article, options) 
       .map(success => success.status) 
       .catch(this.handleError); 
    } 
    //Fetch article by id 
    getArticleById(articleId: string): Observable<Article> { 
     let cpHeaders = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: cpHeaders }); 
     console.log(this.articleUrl +"/"+ articleId); 
     return this.http.get(this.articleUrl +"/"+ articleId) 
       .map(this.extractData) 
       .catch(this.handleError); 
    } 
    //Update article 
    updateArticle(article: Article):Observable<number> { 
     let cpHeaders = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: cpHeaders }); 
     return this.http.put(this.articleUrl +"/"+ article.id, article, options) 
       .map(success => success.status) 
       .catch(this.handleError); 
    } 
    //Delete article  
    deleteArticleById(articleId: string): Observable<number> { 
     let cpHeaders = new Headers({ 'Content-Type': 'application/json' }); 
     let options = new RequestOptions({ headers: cpHeaders }); 
     return this.http.delete(this.articleUrl +"/"+ articleId) 
       .map(success => success.status) 
       .catch(this.handleError); 
    } 
    private extractData(res: Response) { 
     let body = res.json(); 
     return body; 
    } 
    private handleError (error: Response | any) { 
     console.error(error.message || error); 
     return Observable.throw(error.status); 
    } 
} 

これは私のdb.jsonです：

{ 
    "articles": [ 
     { 
     "id": 1, 
     "title": "Android AsyncTask Example", 
     "category": "Android" 
     } 
    ] 
} 

Answer 1

私は、4200のポート5005で実行しているバックエンドサービス、およびアプリケーションを実行してい私はこの

{ 
    "/api/*":{ 
    "target":"http://localhost:5005", 
    "secure": false, 
    "logLevel": "debug" 
    } 
} 

とするとき、私のように見えるproxy.config.jsonファイルを設定しているお互いに「話」にオーダー私のアプリを実行すると私は ng serve -open --sourcemap=false --proxy-config proxy.config.jsonコマンドを実行します。

また、このようなことを試みることもできます。