Not able to call node service from angular - node.js

Question

I was learning to call node from angular,in my component i had the following code
import { Component, OnInit } from '#angular/core';
import {GetvalidationService} from '../_services/getvalidation.service';
#Component({
selector: 'app-content',
templateUrl: './content.component.html',
styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {
constructor(private service:GetvalidationService) { }
ngOnInit(): void {
this.getStudentData();
}
studentDetails :any =[]
getStudentData(){
this.service.getStudentData().subscribe()
}
}
the service is defined as followed
import { Injectable } from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class GetvalidationService {
constructor(private http:HttpClient) { }
authenticateLogin(userDetails){
return this.http.post("/api/login",userDetails)
}
getStudentData(){
return this.http.get("/api/student");
}
}
and I have done the proxy.conf.json setting in package.json as well
my proxy.conf.json looks like
{
"/api/*":{
"target":"http://localhost:3000",
"secure": false,
"changeOrigin": true,
"pathrewrite":{"^/api":""}
}
}
inspite of this when i make a call for student the angular service makes call to http://localhost:4200/api/student instead of the node service on port 3000 where would i be going wrong ? I use npm run start to start the angular app

Answer 1

You have to define your baseUrl, if you do not do that then you end up with one you defined in your angular port options, i.e. localhost:4200.
So the piece of code required to connect to the node is this:
I suggest keeping the api url in environment, so that you can easily move it around different environments like this:
export const environment = {
production: false,
api: 'http://localhost:3000'
};
Your Service ts file will then include the api from enviornment:
import { Injectable } from '#angular/core';
import {HttpClient} from '#angular/common/http';
#Injectable({
providedIn: 'root'
})
export class GetvalidationService {
private baseUrl= environment.api + '/api'; // URL to your web api
constructor(private http:HttpClient) { }
authenticateLogin(userDetails){
return this.http.post(`${this.baseUrl}/login`,userDetails)
}
getStudentData(){
return this.http.get(`${this.baseUrl}/student`);
}
}