Failed to load resource: the server responded with a status of 404 (Not Found) Angular12 Spring boot

Question

I am new to Sping Boot, rest api and angular12,

I am running my program in vscode to call the back api and i get the error "Failed to load resource: the server responded with a status of 404 (Not Found)"

my codes: backend controller :

@RestController
@RequestMapping("/evaluationController/")
public class EvaluationController {
    
    @Autowired
    private EvaluationRepository evaluationrepository;
    
    
    //get all evaluationsnotes
    @CrossOrigin(origins = "http://localhost:4200/")
    @GetMapping("/notes")
    public List<EvaluationModel> getAllEvaluations(){
        return evaluationrepository.findAll();
    }
    
    //post notes
    
    @PostMapping("/notes")
    public EvaluationModel createEvaluationNote(@RequestBody EvaluationModel evaluationNote) {
        return evaluationrepository.save(evaluationNote);
    }
}

My front end angular12 service

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

private baseUrl!: "http://localhost:8080/evaluationController/notes";
  constructor(private httpClient: HttpClient) { }

  httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  }  

getEvaluationNotes():Observable<Evaluationotes[]>{
  return this.httpClient.get<Evaluationotes[]>(`${this.baseUrl}`);
}


}

my typescript file

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

  evaluationNote!: Evaluationotes[];

  constructor(private evaluationNoteService: EvaluationserviceService ) { }

  ngOnInit(): void {
    this.getAllNotes();
  }

  private getAllNotes(){
    this.evaluationNoteService.getEvaluationNotes().subscribe(data=>{
      this.evaluationNote = data;
    });
  }

}

Thank you!

score 0 · Answer 1 · answered Jun 13 '21 at 09:07

The issue is with the baseUrl, you need to use = (used for initialization) instead of : (used in typescript to define an objects type). Since you are never really initializing the variable with proper url, request is going to some random url like http://localhost:4200/undefined causing 404. You can update the url as follows and try:

private baseUrl = "http://localhost:8080/evaluationController/notes";

Failed to load resource: the server responded with a status of 404 (Not Found) Angular12 Spring boot

1 Answers1