how to avoid this error from the console?-CodePudding

the rest api is working fine and when i tested it in postman i had a good response and the back end code is working fine in the server but when i connect angular with the api i had error in console that i canot deal with the server error is (GET http://localhost:4200/${this.apiServerUrl}/all 404 (Not Found))

the front end code

//this is employee.ts //

export interface Employee{
    id:number;
    name:string;
    email:string;
    jobTitle:string;
    phone:string;
    imageUrl:string;
    employeeCode:string
}

//this is employee service.ts//

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable, observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Employee } from './employee';

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

  constructor(private httpclient:HttpClient) { }
  private apiServerUrl=environment.apiBaseUrl;
  
  public getEmployees(): Observable<Employee[]> {

    return this.httpclient.get<Employee[]>('${this.apiServerUrl}/all');
}

//this is app module//

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';
import { EmployeeService } from './employee.service';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule
  ],
  providers: [EmployeeService],
  bootstrap: [AppComponent]
})
export class AppModule { }

//this is app component.ts//

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

import { Employee } from './employee';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'employeemanagerapp';
  public employees!:Employee[];
  constructor(private employeeservice:EmployeeService){}
  ngOnInit() {
    this.getEmployees();
  }
  public getEmployees():void{
    this.employeeservice.getEmployees().subscribe( 
      (response: Employee[]) => {
        this.employees = response;
        console.log(this.employees);
      },
      (error: HttpErrorResponse) => {
        alert(error.message);
      }
    );
     
     

    

    
  }
}

// this is app component.html//

<div *ngFor="let employee of employees">
  <div>{{employee.name}}</div>

</div>

// this is environment that contains the url//

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

back end code

// this is my back end rest api to get list of employees//

    package tech.getarrays.employeemanager.controller;
    
    import java.util.List;
    
    import org.springframework.http.HttpStatus;
    import org.springframework.http.ResponseEntity;
    import org.springframework.stereotype.Controller;
    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.PostMapping;
    import org.springframework.web.bind.annotation.PutMapping;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;
    
    import tech.getarrays.employeemanager.model.Employee;
    import tech.getarrays.employeemanager.service.EmployeeService;
    
    @Controller
    
    public class EmployeeController {
    private final EmployeeService employeeService ;
    public EmployeeController( EmployeeService employeeService) {
        this.employeeService=employeeService;
    }
    @GetMapping("/all")
    public ResponseEntity<List<Employee>>getAllEmployees(){
        List<Employee> employees=employeeService.findall();
        return new ResponseEntity<>(employees,HttpStatus.OK);

//this is application.properties//
spring.datasource.url=jdbc:mysql://localhost:3306/employeemanager
spring.datasource.username=root
spring.datasource.password=ahmed3020
spring.jpa.show-sql=true
spring.jpa.hibernate.ddl-auto=update
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.MySQL5Dialect

CodePudding user response：

You should use backticks to use template literals

return this.httpclient.get<Employee[]>(`${this.apiServerUrl}/all`);
                                       ^                        ^     // backticks here