Proxy Config not working with Angular CLI in Angular 6

[Dalvir Singh]

I am not able to Make API calls from my angular 6 app using proxy.

I am getting 504 gateway time out and instead of my api url its using the local url of angular app to make calls. Like this: 

POST http://localhost:4200/api/user/signin 504 (Gateway Timeout)

expected result should be like that api call should go to 

http://localhost:1100/api/user/signin

This was working before few days ago. Do not know what happened now that is stooped worrying. 

I tried with both commands: 

npm start

 and 

ng serve --proxy-config proxy.config.json

its not working now with both . Plz help to fix it.  I looked at many posts related to this issue. I followed these posts to apply solution but no luck.

Proxy.config.json has following lines of code I have in proxy file 

    

   

{
      "/api": {
        "target": "http://localhost:1100",
        "secure": false,
      }
    }

Package Json file has: 

   

 "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.config.json",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },

App.service.ts: 

   

import { Injectable } from '@angular/core';
   
    import { HttpHeaders, HttpClient, HttpParams } from '@angular/common/http';
    import { Observable } from 'rxjs/Observable';
   
    import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
    import { catchError } from 'rxjs/operators/catchError';
    @Injectable({
      providedIn: 'root'
    })
    export class ApiService {
      private apiUrl: string;
      constructor(
        private http: HttpClient,
      ) {
        this.apiUrl = '';
      }
   
      private formatErrors(error: any) {
        console.log(error)
        return new ErrorObservable(error);
      }
   
      get(path: string, params: HttpParams = new HttpParams()): Observable<any> {
        return this.http.get(`${this.apiUrl}${path}`, { params })
          .pipe(catchError(this.formatErrors));
      }
   
      post(path: string, body: Object = {}): Observable<any> {
        return this.http.post(
          `${this.apiUrl}${path}`,
          JSON.stringify(body)
        ).pipe(catchError(this.formatErrors));
      }
   
     
    }

User Service.ts

   

import { Injectable } from '@angular/core';
    import { Observable } from 'rxjs/Observable';
    import { ApiService } from './api.service';
    import { map } from 'rxjs/operators/map';
    import {User} from '../models/user.model';
    @Injectable({
      providedIn: 'root'
    })
    export class UserService {
      constructor(private apiService: ApiService) { }
      signin(id, data): Observable<User>{
        return this.apiService.post('/api/user/signin', data)
        .pipe(map(data => data));
      }
      signup(id, data): Observable<User>{
        return this.apiService.post('/api/user/'+id+'/signup', data)
        .pipe(map(data => data));
      }
     
    }

User Model.ts

   

 export class User{
      constructor(){};  
        id: number;
        email: string;
          password:string ;
          firstName:string ;
          lastName:string ;
          type:number ;
          company:string;
    }

Signin.componenet.ts

 

  import { Component, OnInit } from '@angular/core';
    import{User} from '../../core/models/user.model'
    import { UserService } from 'src/app/core';
    import { FormsModule, ReactiveFormsModule } from '@angular/forms';
    import { NgModule } from '@angular/core';
    @Component({
      selector: 'app-signin',
      templateUrl: './signin.component.html',
      styleUrls: ['./signin.component.css'],
      providers: [UserService],
    })
    @NgModule({
      imports: [
        FormsModule,
        ReactiveFormsModule,
      ],
    })
    export class SigninComponent implements OnInit {
      private user: User=new User();
     
      constructor(private userSvc:  UserService) {
        this.user.email="";
        this.user.password="";
      }
    private email:string="";
      ngOnInit() {
      }
      ValidateLogin (){
    //validate
    var userid=0;
    alert(this.email);
    var param={firstName:this.user.firstName,
      lastName:this.user.lastName,
      email:this.user.email,
      password:this.user.password,
      company:this.user.company,
      type:1,
    };
   
    this.userSvc.signin(userid, this.user).subscribe(data => {
      if(Number(data.id)>0){
       console.log("return status: ");
       }
       else{ console.log("error");}
     });
      }
    }

Package                           Version


    -----------------------------------------------------------
    @angular-devkit/architect         0.6.8
    @angular-devkit/build-angular     0.6.8
    @angular-devkit/build-optimizer   0.6.8
    @angular-devkit/core              0.6.8
    @angular-devkit/schematics        0.6.8
    @angular/cli                      6.0.8
    @ngtools/webpack                  6.0.8
    @schematics/angular               0.6.8
    @schematics/update                0.6.8
    rxjs                              6.2.1
    typescript                        2.7.2
    webpack                           4.8.3

[Sander Elias]

Did you try restarting your API server?