Get Request In Angular Seems To Not Resolve, Despite Having No Error

I'm working on a small project and i'm trying to makke my backend and frontend communicate data via HTTP Requests. My back in a spring application, and is only posting data for a coloured grid at the endpoint "http://localhost:8080/api/grid/generate?size=4" ( Hardcoded for now ).

I checked and the post is resolving itself, and posting where it should :

{
"grid": [
[
{
"color": "#9a8ca3",
"gridPosition": [0, 0]
},
{
"color": "#6382f1",
"gridPosition": [0, 1]
},
{
"color": "#9f4f77",
"gridPosition": [0, 2]
},
{
"color": "#6382f1",
"gridPosition": [0, 3]
}
],
[
{
"color": "#0632ea",
"gridPosition": [1, 0]
},
{
"color": "#9a8ca3",
"gridPosition": [1, 1]
},
{
"color": "#9f4f77",
"gridPosition": [1, 2]
},
{
"color": "#5e6c0f",
"gridPosition": [1, 3]
}
],
[
{
"color": "#9a8ca3",
"gridPosition": [2, 0]
},
{
"color": "#5e6c0f",
"gridPosition": [2, 1]
},
{
"color": "#FFFFFF",
"gridPosition": [2, 2]
},
{
"color": "#0632ea",
"gridPosition": [2, 3]
}
],
[
{
"color": "#74e57b",
"gridPosition": [3, 0]
},
{
"color": "#0632ea",
"gridPosition": [3, 1]
},
{
"color": "#74e57b",
"gridPosition": [3, 2]
},
{
"color": "#74e57b",
"gridPosition": [3, 3]
}
]
],
"emptyCellPosition": [2, 2]
}


Now for the "tricky" part : In angular, to get my grid I wrote this in a corresponding service :

import { Injectable } from '@angular/core';
import { CellComponent } from '../components/cell/cell.component';
import {HttpClient} from "@angular/common/http";
import {Observable} from "rxjs";

@Injectable({
providedIn: 'root'
})
export class GridService {
private readonly apiUrl = 'http://localhost:8080/api/grid';
private constructor(private readonly http: HttpClient) {}

// Generate grid from backend API
public generateGrid(size: number): Observable<{ grid: CellComponent[][], emptyCellPosition: [number, number] }> {
console.log("Url used: ",`${this.apiUrl}/generate?size=${size.toString()}` );
return this.http.get<{ grid: CellComponent[][], emptyCellPosition: [number, number] }>(`${this.apiUrl}/generate?size=${size.toString()}`);
}


this is what i wrote in my grid component :

public constructor(private readonly gridService: GridService) {
}

public ngOnInit(): void {
this.initGrid();
}

private initGrid(): void {
this.gridService.generateGrid(this.size).subscribe({
next: ({ grid, emptyCellPosition }) => {
this.grid = grid;
this.emptyCellPosition = emptyCellPosition;
this.score = 0;
},
error: (err) => {
console.error('Error generating grid:', err);
}
});
}


I can't seem to find an error anywhere, and analysing the "Network" in my rendered page does not show any get request being made. Am I blind or did I made a rookie mistake in Angular ?

I checked for the URL if it was not correct, I tried hardcoding it but it did not change anything. I also checked using the type any, and it also did not give proper results. I also checked if the get function worked and gave back an observable, which it did ("Observable2").

Continue reading...