I'm making an small Person Management System (like an agenda) with Angular. Its my first Angular Application.

I've been following this tutorial: https://www.techiediaries.com/angular-11-crud-rest-api-tutorial/

And had problems before that were solved on this post: Object is possibly null - Angular (ts2531) [Can't get it fixed]

However, after getting my application to run, when i try to create a person i just receive a "Connection Refused" message. Based on what i searched, the message is about my API not being active therefore it can't make the connection for running the operations. How could i test and fix it?

Any input is very much appreciated. Thanks.

The error: person-list.component.ts:59 GET http://localhost:8080/api/persons?name=Pablo net::ERR_CONNECTION_REFUSED (Whenever i try to access the api persons)

person-create-component.ts

import { Component, OnInit } from '@angular/core';
import { PersonService } from 'src/app/services/person.service';

@Component({
  selector: 'app-person-create',
  templateUrl: './person-create.component.html',
  styleUrls: ['./person-create.component.css']
})
export class PersonCreateComponent implements OnInit {
  person = {
    name: '',
    surname: '',
    address: '',
    phone: '',
    whatsapp: '',
    instagram: '',
    available: false
  };
  submitted = false;

  constructor(private personService: PersonService) { }

  ngOnInit(): void {
  }

  createPerson(): void {
    const data = {
      name: this.person.name,
      surname: this.person.surname,
      address: this.person.address,
      phone: this.person.phone,
      whatsapp: this.person.whatsapp,
      instagram: this.person.instagram,
      available: this.person.available
    };

    this.personService.create(data)
      .subscribe( //According to chrome console, the error is on this line.
        response => {
          console.log(response);
          this.submitted = true;
        },
        error => {
          console.log(error);
        });
  }

  newPerson(): void {
    this.submitted = false;
    this.person = {
      name: '',
      surname: '',
      address: '',
      phone: '',
      whatsapp: '',
      instagram: '',
      available: false
    };
  }

}

person-service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

const baseURL = 'http://localhost:8080/api/persons';

export type Person =
{  
  available: boolean;
  id: number;
  name: string;
  surname: string;
  address: string;
  phone: string;
  whatsapp: string;
  instagram: string;
};

@Injectable({
  providedIn: 'root'
})

export class PersonService {

  constructor(private httpClient: HttpClient) { }
  
  readAll(): Observable<any> {
    return this.httpClient.get(baseURL);
  }

  read(id: any): Observable<any> {
    return this.httpClient.get(`${baseURL}/${id}`);
  }

  create(data: any): Observable<any> {
    return this.httpClient.post(baseURL, data);
    
  }
  update(id: any, data: any): Observable<any> {
    return this.httpClient.put(`${baseURL}/${id}`, data);
  }

  delete(id: any): Observable<any> {
    return this.httpClient.delete(`${baseURL}/${id}`);
  }

  deleteAll(): Observable<any> {
    return this.httpClient.delete(baseURL);

    
  }

  searchByName(name: string): Observable<any> {
    return this.httpClient.get(`${baseURL}?name=${name}`);
  }


}