[AngularJS] 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

-- 
You received this message because you are subscribed to the Google Groups 
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.