Angular Service making Http requests to localhost:4200 instead of localhost:8080

Question

I have an Angular + Spring Boot project. The Angular project contains services making Http requests to Spring Boot app running on port 8080. When i try to use apiBaseUrl variable from environment in service i get a 404 status as below:

services is making Http calls to localhost:4200 instead of localhost:8080

environment:

export const environment = {
production: false,
apiBaseUrl: 'http://localhost:8080'
};

service:

import { HttpClient } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";
import { environment } from "src/environments/environment";
import { Student } from "./student";

@Injectable ({
providedIn: 'root'
})

export class StudentService {


private apiServerUrl = environment.apiBaseUrl;

constructor(private http: HttpClient) { }

public getStudents(): Observable<Student[]> {

  return this.http.get<Student[]>('${this.apiServerUrl}/student');

}
 //rest of code

but when i make a change and give url direct, everything works fine.

return this.http.get<Student[]>('http://localhost:8080/student');

can someone explain it to me, this is my first angular app, so thank you for your understanding

Answer 1

You should be using backticks `, not single quotes '

  return this.http.get<Student[]>(`${this.apiServerUrl}/student`);