0

Estoy haciendo un proyecto con angular + spring boot. Y me da el error: Failed to load resource: net::ERR_CONNECTION_REFUSED. A veces me sale este otro error: GET http://localhost:8090/api/employees net::ERR_CONNECTION_REFUSED, Dependiendo de si inicio angular con ng serve --proxy-config proxy.conf.json o con ng serve a secas.

Mi controlador de Spring boot es el siguiente.

package com.test.mainApp.controller;

import com.test.mainApp.entity.Employee;
import com.test.mainApp.repository.EmployeeRepository;
import java.util.List;
import java.util.Optional;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

@CrossOrigin(origins = "http://localhost:4200", allowedHeaders="*")
@RestController
@RequestMapping("/api")
public class EmployeeController {

 EmployeeRepository employeeRepository;


 //@RequestMapping(value="/employees", method=RequestMethod.GET)
 @GetMapping("/employees")
 public List<Employee> getEmployees(){
     return (List)employeeRepository.findAll();
 }

 //@RequestMapping(value = "/employees/{job}", method=RequestMethod.GET)
 @GetMapping("/employees/{job}")
 public List<Employee> getEmployeesByJob(@PathVariable String job){
     return (List)employeeRepository.findByJob(job);
 }

 //@RequestMapping(value="/employees/{id}", method=RequestMethod.DELETE)
 @DeleteMapping("/emloyees/{id}")
 public boolean deleteEmployee(@PathVariable Long id){
     Optional<Employee> dbEmployee = employeeRepository.findById(id);
     if(dbEmployee.isPresent()) {
         Employee existingEmployee = dbEmployee.get();
         employeeRepository.delete(existingEmployee);
         return true;
     }
     return false;
 }

}

Mi componente para listar los empleados es este:

import { Component, OnInit } from '@angular/core';
import { HttpErrorResponse } from '@angular/common/http';

import { Employee } from '../../entities/employee';
import { EmployeeServiceService } from '../../services/employee-service.service';

@Component({
  selector: 'app-list-employee',
  templateUrl: './list-employee.component.html',
  styleUrls: ['./list-employee.component.css']
})
export class ListEmployeeComponent implements OnInit {

  employees: Array<Employee>;

  constructor(private emploService: EmployeeServiceService) { }

  ngOnInit() {
    this.emploService.getAllEmployees()
    .subscribe(response => this.employees = response), (err: HttpErrorResponse) => {
        if (err.error instanceof Error) {
          console.log("Client-side error occured.");
        } else {
          console.log("Server-side error occured.");
        }
});

}

}

Mi Servicio de angular es este:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Employee } from '../entities/employee';

@Injectable({
  providedIn: 'root'
})
export class EmployeeServiceService {

  private url:string="http://localhost:8090/api";

  constructor(private http: HttpClient) {
  }

  public getAllEmployees(): Observable<any> {
    return this.http.get(this.url+"/employees");
  }


}

Añadir que tengo el proyecto de angular dentro de ~/NetBeansProjects/MyFirstApp/src/main/resources/static/crud-employees-client (Sí, estoy en Linux. Point Linux, más concretamente). Con Spring Initializr he añadido las dependencias Web, JPA y H2. En consola, también me aparece "Server-side error occured.", que es el error que he capturado y he obtenido información gracias al HttpErrorResponse.

Si necesitáis algún dato más, decid. Gracias de antemano.


Edit:

El error es: GET http://localhost:8090/api/employees net::ERR_CONNECTION_REFUSED scheduleTask @ zone.js:2969 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407 onScheduleTask @ zone.js:297 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:401 push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232 push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255 scheduleMacroTaskWithCurrentZone @ zone.js:1114 (anonymous) @ zone.js:3001 proto.(anonymous function) @ zone.js:1394 (anonymous) @ http.js:1639 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:42 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28 (anonymous) @ subscribeTo.js:21 subscribeToResult @ subscribeToResult.js:6 push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._innerSub @ mergeMap.js:70 push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:67 push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:50 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 (anonymous) @ scalar.js:5 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable._trySubscribe @ Observable.js:42 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:28 push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:28 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23 push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterOperator.call @ filter.js:15 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23 push../node_modules/rxjs/_esm5/internal/operators/map.js.MapOperator.call @ map.js:18 push../node_modules/rxjs/_esm5/internal/Observable.js.Observable.subscribe @ Observable.js:23 push../src/app/components/list-employee/list-employee.component.ts.ListEmployeeComponent.ngOnInit @ list-employee.component.ts:20 checkAndUpdateDirectiveInline @ core.js:9248 checkAndUpdateNodeInline @ core.js:10512 checkAndUpdateNode @ core.js:10474 debugCheckAndUpdateNode @ core.js:11107 debugCheckDirectivesFn @ core.js:11067 (anonymous) @ ListEmployeeComponent_Host.ngfactory.js [sm]:1 debugUpdateDirectives @ core.js:11059 checkAndUpdateView @ core.js:10456 callViewAction @ core.js:10697 execEmbeddedViewsAction @ core.js:10660 checkAndUpdateView @ core.js:10457 callViewAction @ core.js:10697 execComponentViewsAction @ core.js:10639 checkAndUpdateView @ core.js:10462 callWithDebugContext @ core.js:11349 debugCheckAndUpdateView @ core.js:11027 push../node_modules/@angular/core/fesm5/core.js.ViewRef_.detectChanges @ core.js:8843 (anonymous) @ core.js:4579 push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4579 (anonymous) @ core.js:4471 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388 onInvoke @ core.js:3822 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387 push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138 push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3736 next @ core.js:4471 schedulerFn @ core.js:3553 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:195 push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:133 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77 push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54 push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47 push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3537 checkStable @ core.js:3791 onHasTask @ core.js:3835 push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:441 push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:461 push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:285 push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:205 drainMicroTaskQueue

Edit2: Estoy en otro PC, lo he probado y he conseguido que sólo el Spring Boot me imprima Hello world, en http://localhost:8080/api/test. Pero cuando lo combino con Angular y éste tiene que obtener los datos del servidor, falla. Me sale en firefox: Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en http://localhost:8080/api/test. (Razón: Solicitud CORS sin éxito). Y en Chrome me sigue saliendo el mismo error: Failed to load resource: net::ERR_CONNECTION_REFUSED Y se supone que añadiendo @CrossOrigin(origins="http://localhost:4200") encima del controlador debería ir, pero no es así.


Edit3: He creado una clase para evitar el problema con CORS. La clase es la siguiente:

package com.test.mainApp.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
@EnableWebMvc
public class AppConfig implements WebMvcConfigurer {
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/test").allowedOrigins("http://localhost:4200")
                .allowedMethods("GET", "POST", "OPTIONS", "PUT")
                .allowedHeaders("*")
                .allowCredentials(true).maxAge(3600);
    }
}

Ahora me sale en firefox:

Object { headers: Object, status: 0, statusText: "Unknown Error", url: null, ok: false, name: "HttpErrorResponse", message: "Http failure response for (unknown …", error: error }

Y en chromium: "Error HttpErrorResponse", aparte del "Failed to load resource: net::ERR_CONNECTION_REFUSED." Y en chromium: "Error HttpErrorResponse", aparte del "Failed to load resource: net::ERR_CONNECTION_REFUSED."

Cuando printo el error en formato string, me aparece [ object Object ]

1
  • puedes poner el error completo porfavor Commented el 4 ago. 2018 a las 15:03

2 respuestas 2

0

En tu servicio Angular has declarado

private url:string="http://localhost:8090/api";

pero dado que no has incluido ni indicado nada respecto a la configuración que usas para Spring Boot, ¿estás seguro que ese es el puerto correcto? Por defecto, la aplicación SB escuchará en el 8080 y no en ese 8090, lo que explicaría que te de ese error.

6
  • En el archivo de application.properties de Spring Boot tengo puesto: server.port=8090
    – JavaDev
    Commented el 4 ago. 2018 a las 14:39
  • Ok. Aún y así te has asegurado que realmente esté escuchando en ese puerto? Has probado a crear un endpoint simple que te devuelva un "hello world", por ejemplo, y a invocarlo desde el navegador con una URL tipo localhost:8090/api/test ? Commented el 4 ago. 2018 a las 17:42
  • Con anterioridad probé el puerto 8080 y me salía el mismo error. Lo que pasa que cambié el puerto para que no entrase en conflicto con el Tomcat. He probado lo que me dices, de intentar printar un hello world y me sale el mismo error: (1) Failed to load resource: net::ERR_CONNECTION_REFUSED. (2) ERROR HttpErrorResponse defaultErrorLogger.
    – JavaDev
    Commented el 4 ago. 2018 a las 18:06
  • Cuando estaba desarrollando la parte de Java Spring abrí la consola de h2 e hice un select de unos valores que se introducen en la db al iniciar la aplicación, y me salían los valores insertados. Eso si, cuando accedía a: localhost:8080/api/employees (antes lo tenia en el puerto 8080), me salía el Whitelabel error page, en vez de los valores de los empleados insertados.
    – JavaDev
    Commented el 4 ago. 2018 a las 18:08
  • Si uso localhost:8080/api/test me sale este error: (1)GET localhost:8080/api/test net::ERR_CONNECTION_REFUSED. (2)ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false…}
    – JavaDev
    Commented el 4 ago. 2018 a las 18:17
0

Ya he dado con la solución. Fallaban varias cosas. En primer lugar, me faltaba una anotación @Autowired en el Controlador:

@Autowired
EmployeeRepository employeeRepository;

Luego, en vez de EmployeeRepository extends CrudRepository he puesto EmployeeRepository extends JpaRepository<Employee, Long> para asegurarme que el employeeRepository.findAll() devolviese una Lista y no un Iterable.

Para seguir, he cambiado la estructura de las carpetas. El proyecto de spring lo tenia dentro de proyecto/server y la parte de angular en proyecto/client. Esto es importante porque así puedes abrir por un lado el servidor en Eclipse/Netbeans y por otro en una terminal el angular. De la forma en la que lo tenía antes, no funcionaba.

Y por último, sé que es una chorrada, pero me explicaré: iniciaba sólo el cliente, en vez del cliente y el servidor, porque en uno de mis pcs cuando lo hacia se quedaba congelado. Cambié de pc a uno más potente, y ya iba.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.