Recommand · November 24, 2021 0

Angular HttpErrorResponse GET Request

I have a simple Quarkus project and want to show the data in an Angular table with HttpClient. I also have a CORS Filter. Anyway, I get the following error:
Angular table with no date, HttpErrorResponse Status 0

service.ts

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

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

  url = "localhost:8080/school"

  constructor(public http: HttpClient) { }

  getAll(): Observable<School[]> {
    return this.http.get<School[]>(this.url);
  }

  getById(id: number): Observable<School> {
    const url = "locahlost:8080/school/{id}";
    return this.http.get<School>(url);
  }

}

ts of component

import { Component, OnInit } from '@angular/core';
import { School } from '../model/school';
import { SchoolService } from '../school.service';

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

  schools: School[] = [];
  
  constructor(public schoolService: SchoolService) { }

  ngOnInit(): void {
    this.schoolService.getAll().subscribe(e => {
      this.schools = e;
    });
  }

}

html

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Street</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let school of schools">
            <td>{{school.id}}</td>
            <td>{{school.name}}</td>
            <td>{{school.street}}</td>
        </tr>
    </tbody>
</table>

server model

package model;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;

@Entity
public class School {

    @Id
    @GeneratedValue
    private int id;
    private String name;
    private String street;

    public int getId() {
        return id;
    }

    public void setId(int id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getStreet() {
        return street;
    }

    public void setStreet(String street) {
        this.street = street;
    }
}

resource

package rest;

import model.School;

import javax.inject.Inject;
import javax.transaction.Transactional;
import javax.ws.rs.GET;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import java.util.List;

@Path("school")
@Produces(MediaType.APPLICATION_JSON)
@Transactional
public class SchoolResource {

    @Inject
    SchoolDao dao;

    @GET
    public List<School> getAll() {
        return dao.getAll();
    }

    @Path("id")
    @GET
    public School getById(@PathParam("id") int id) {
        return dao.getById(id);
    }

}

dao

package rest;

import model.School;

import javax.enterprise.context.Dependent;
import javax.inject.Inject;
import javax.persistence.EntityManager;
import java.util.List;

@Dependent
public class SchoolDao {

    @Inject
    EntityManager em;

    public List<School> getAll() {
        return em.createQuery("select s from School s", School.class).getResultList();
    }

    public School getById(int id) {
        return em.find(School.class, id);
    }

}

Thank you in advance, I think the problem must be on the server, because I tried showing data with a JSON file instead of Quarkus data already, and it does work.

Thank you @R.Richards, I forgot to put "http://" in front of the url in the service file.