How to fix 404 Not Found when sending GET/POST requests to express server via Angular App and...

I am trying to create an Angular app that sends GET & POST requests to an express server using NodeJS.

When I serve the app, GET & POST requests are meant to be sent to my local server, but I'm getting an error in the console, this error is logged below.

Also, when I go to localhost:3000, the server is running.

Here is my component class:

import { Component, OnInit } from "@angular/core";
import { RootService } from "./root.service";

@Component({
selector: "app-root",
templateUrl: "./root.component.html",
styleUrls: ["./root.component.css"]
})
export class RootComponent implements OnInit {
constructor(private rootService: RootService) {}

ngOnInit() {
this.rootService.getAPIData().subscribe(
response => {
console.log("response from GET API is ", response);
},
error => {
console.log("error is ", error);
}
);

this.rootService.postAPIData().subscribe(
response => {
console.log("response from POST API is ", response);
},
error => {
console.log("error during post is ", error);
}
);
}
}


And here is root.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

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

constructor(private http: HttpClient) { }

getAPIData(){
return this.http.get('/api/getData')
}

postAPIData(){
return this.http.post('/api/postData', {'firstName' : 'Code', 'lastName' : 'Handbook'})
}
}


Here is my server code:

const express = require('express')
const app = express()
const bodyParser = require('body-parser')

app.get('/', (req, res) => {
res.send('Welcome to Node API')
})

app.get('/getData', (req, res) => {
res.json({'message': 'Hello World'})
})

app.post('/postData', bodyParser.json(), (req, res) => {
res.json(req.body)
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))


I also have this proxy.conf.json file:

{
"/api/*": {
"target": "http://localhost:3000",
"pathRewrite": {"^/api" : ""}
}
}


When I serve my app, I get the following output to the console:

error is
Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/getData", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/api/getData: 404 Not Found", error: "\n\n\n\nError\n\n\n
Cannot GET /api/getData
\n\n\n" } root.component.ts:18:8 error during post is
Object { headers: {…}, status: 404, statusText: "Not Found", url: "http://localhost:4200/api/postData", ok: false, name: "HttpErrorResponse", message: "Http failure response for http://localhost:4200/api/postData: 404 Not Found", error: "\n\n\n\nError\n\n\n
Cannot POST /api/postData
\n\n\n" }
​

Can someone please help me with this error?

Continue reading...