404 Error in Angular 2 even though Backend Nodejs url works when typed in browser and shows data from Oracle

Question

I am trying to display data in my Angular frontend that is called against an Oracle DB linked to my Node backend. Currently if I go to the phsyiscal API link I will see the data and it will display in my backend console.log.

Am I missing something easy here? I am a newbie so apologize in advance if this is easy.

Angular Page Component

 import { Component, OnInit } from '@angular/core'; import { Observable } from 'rxjs'; import { DBService, Group} from '../db.service'; import { HttpClient } from '@angular/common/http'; import { NgIf } from '@angular/common/src/directives/ng_if'; import { element } from 'protractor'; import { ActivatedRoute } from '@angular/router'; import { Router } from '@angular/router'; @Component({ selector: 'app-flow', templateUrl: './flow.component.html', styleUrls: ['../css.css'] }) export class FlowComponent implements OnInit { groups: Group[]; constructor( private auth: AuthenticationService, private dbService: DBService, private route: ActivatedRoute, private router: Router ) {} ngOnInit() { this.dbService.getGroup2().subscribe(groups => this.groups = groups); } } 

DB Service Code

 getGroup2(): Observable<Group[]> { const url = 'http://localhost:4200/api/' + 'employees'; const data = ({ }); return this._http.post(url, data) .pipe( map((res) => { console.log(res); return <Group[]> res; }) ); } 

Backend

services/router.js

 const express = require('express'); const router = new express.Router(); const employees = require('../controllers/employees.js'); router.route('/employees') .get(employees.get); module.exports = router; 

services/database.js

 const oracledb = require('oracledb'); const dbConfig = require('../config/database.js'); async function initialize() { const pool = await oracledb.createPool(dbConfig.hrPool); } module.exports.initialize = initialize; // close the function async function close() { await oracledb.getPool().close(); } module.exports.close = close; // simple executre function function simpleExecute(statement, binds = [], opts = {}) { return new Promise(async (resolve, reject) => { let conn; opts.outFormat = oracledb.OBJECT; opts.autoCommit = true; try { conn = await oracledb.getConnection(); const result = await conn.execute(statement, binds, opts); resolve(result); } catch (err) { reject(err); } finally { if (conn) { // conn assignment worked, need to close try { await conn.close(); } catch (err) { console.log(err); } } } }); } module.exports.simpleExecute = simpleExecute; 

controllers/employees.js

 const employees = require('../db_apis/employees.js'); async function get(req, res, next) { try { const context = {}; // context.id = parseInt(req.params.id, 10); const rows = await employees.find(11); if (req.params.id) { if (rows.length === 1) { res.status(200).json(rows[0]); } else { res.status(404).end(); } } else { res.status(200).json(rows); } } catch (err) { next(err); } } module.exports.get = get; 

db_apis/employees.js

 const database = require('../services/database.js'); const baseQuery = `SELECT * FROM DB.EMPLOYEES`; async function find(context) { // let query = baseQuery; // const binds = {}; // if (context.id) { // binds.employee_id = context.id; // query += `\\nwhere employee_id = :employee_id`; // } const result = await database.simpleExecute(baseQuery); console.log(result.rows); return result.rows; } module.exports.find = find; 

Answer 1

You have router.route('/employees').get(employees.get); but in your services you are doing this._http.post(url, data)

You should be doing a get request this._http.get(url)... .

Answer 2

In your getGroup2, where is the headers part?

getGroup2(): Observable<Group[]> {
 const url = 'http://localhost:4200/api/' + 'employees';
 const data = ({
 });
 return this._http.post(url, data)
 .pipe(
  map((res) => {
     console.log(res);
    return <Group[]> res;
  })
 );
 }

you must include the options

const headers = new HttpHeaders({
      'Content-Type':  'application/json',
      'Authorization': `Bearer fs4df4sdfsd4fs`
    });
const options = {headers: _headers}

return this._http.post(url, data, options)

Hope this helps 👍