GET http://localhost:8000/api net::ERR_CONNECTION_REFUSED

Question

I am Making a angular project to show, add, delete, and updated an employees details. I have an api i made myself connected but i keep getting the same error when i try to post or get the list of Employees. I am using Angular, Express, Node, and Mongodb. Any help would be greatly appricated. I am not sure what code to put up to make it easier for the help but i can put up the errors.enter image description here

Get Error

Error

Post Error

import { Injectable } from '@angular/core';
import { Employee } from './Employee';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
 
export class CrudService {
 
  // Node/Express API
  REST_API: string = 'http://localhost:8000/api';
 
  // Http Header
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  router: any;
 
  constructor(private httpClient: HttpClient) { }
 
  // Add
  AddEmployee(data: Employee): Observable {
    let API_URL = `${this.REST_API}/add-employee`;
    return this.httpClient.post(API_URL, data)
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Get all objects
  GetEmployees() {
    return this.httpClient.get(`${this.REST_API}`);
  }
 
  // Get single object
  GetEmployee(id:any): Observable {
    let API_URL = `${this.REST_API}/read-employee/${id}`;
    return this.httpClient.get(API_URL, { headers: this.httpHeaders })
      .pipe(map((res: any) => {
          return res || {}
        }),
        catchError(this.handleError)
      )
  }
 
  // Update
  updateEmployee(id:any, data:any): Observable {
    let API_URL = `${this.REST_API}/update-employee/${id}`;
    return this.httpClient.put(API_URL, data, { headers: this.httpHeaders })
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Delete
  deleteEmployee(id:any): Observable {
    let API_URL = `${this.REST_API}/delete-employee/${id}`;
    return this.httpClient.delete(API_URL, { headers: this.httpHeaders}).pipe(
        catchError(this.handleError)
      )
  }
 
 
  // Error 
  private handleError(error: Response | any) {
    let errorMessage = '';
    if (error.status == 0) {
      // Handle client error
      errorMessage = error.error.message;
      this.router.navigate(['/error'])
    } else {
      // Handle server error
      errorMessage = `Error Code: ${error.status}
Message: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }
 
}

import { Injectable } from '@angular/core';
import { Employee } from './Employee';
import { catchError, map } from 'rxjs/operators';
import { Observable, throwError } from 'rxjs';
import { HttpClient, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 
@Injectable({
  providedIn: 'root'
})
 
export class CrudService {
 
  // Node/Express API
  REST_API: string = 'http://localhost:8000/api';
 
  // Http Header
  httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
  router: any;
 
  constructor(private httpClient: HttpClient) { }
 
  // Add
  AddEmployee(data: Employee): Observable {
    let API_URL = `${this.REST_API}/add-employee`;
    return this.httpClient.post(API_URL, data)
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Get all objects
  GetEmployees() {
    return this.httpClient.get(`${this.REST_API}`);
  }
 
  // Get single object
  GetEmployee(id:any): Observable {
    let API_URL = `${this.REST_API}/read-employee/${id}`;
    return this.httpClient.get(API_URL, { headers: this.httpHeaders })
      .pipe(map((res: any) => {
          return res || {}
        }),
        catchError(this.handleError)
      )
  }
 
  // Update
  updateEmployee(id:any, data:any): Observable {
    let API_URL = `${this.REST_API}/update-employee/${id}`;
    return this.httpClient.put(API_URL, data, { headers: this.httpHeaders })
      .pipe(
        catchError(this.handleError)
      )
  }
 
  // Delete
  deleteEmployee(id:any): Observable {
    let API_URL = `${this.REST_API}/delete-employee/${id}`;
    return this.httpClient.delete(API_URL, { headers: this.httpHeaders}).pipe(
        catchError(this.handleError)
      )
  }
 
 
  // Error 
  private handleError(error: Response | any) {
    let errorMessage = '';
    if (error.status == 0) {
      // Handle client error
      errorMessage = error.error.message;
      this.router.navigate(['/error'])
    } else {
      // Handle server error
      errorMessage = `Error Code: ${error.status}
Message: ${error.message}`;
    }
    console.log(errorMessage);
    return throwError(errorMessage);
  }
 
}

user_16106987 · Answer

Make sure both servers are running (the back-end and front end).
Look into google development tool and see the network section. Look at the request headers and the general. Make sure the request URL / backend has your backend server URL and the orgin / frontend has your frontend URL.

Your issue is that your backend is not connected with your front end properly.

user_6941917 · Answer

I guess your backend/ express server is not running. You can see the instructions here You can run your server using node app.js // replace app.js with the name of your file

So, once you open your http://localhost:8000/api on browser this should give the results (as this is a get request).

GET http://localhost:8000/api net::ERR_CONNECTION_REFUSED

2 Answers