Server does not receive angular http request

Question

I would send data to my database.

so I create my function in my component.ts which calls my service

ajoutText(newtext: String) {
  this.dataService.sendtext(newtext);
}

and in HTML side

<form class="form">
  <mat-form-field class="textinput">
    <input #newtext matInput placeholder="Ajoutez votre texte" value="">
  </mat-form-field>
  <button type="button" mat-raised-button color="primary" (click)="ajoutText(newtext.value)">Ajouter</button>

</form>

then my service sends data to the server

export class AjouttextService {
  url = "http://127.0.0.1:8080/v1";
  constructor(private http: HttpClient) { }

  sendtext(text): Observable<string> {
    console.log(text);
    return this.http.post<string>(this.url, text);
  }
}

my console.log(text) prints well text that I type in my input field.

In my server side I use Express

var http = require("http");
var admin = require('firebase-admin');
var firebase = require("firebase");
var express = require("express");
var app = express();
var routerProj = require("./routes/routes");
var bodyParser = require("body-parser");
var port = process.env.app_port || 8080; // set our port
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
var server = app.listen(port);

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT ,DELETE');

  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,*");
  next();
});
var config = {
  apiKey: "XXXXXXXXXXX",
  authDomain: "datatable-18f93.firebaseapp.com",
  databaseURL: "https://datatable-18f93.firebaseio.com",
  projectId: "datatable-18f93",
  storageBucket: "datatable-18f93.appspot.com",
  messagingSenderId: "282475200118"
};
firebase.initializeApp(config);


var serviceAccount = require("./ServiceAcountKey.json");
admin.initializeApp({
  credential: admin.credential.cert(serviceAccount),
  databaseURL: "https://datatable-18f93.firebaseio.com"
});
app.use("/v1", routerProj);
//Create HTTP server and listen on port 8000 for requests

// Print URL for accessing server
console.log("Server running at http://127.0.0.1:8080/");

Then In my router I insert data in my Firebase database

router.use(function (req, res, next) {
  // do logging
  console.log("HI");
  next(); // 
});
...
router
  .route("/")
  .post(function (req, res, err) {
    console.log("test")
    // Get a database reference to our posts
    var db = admin.database();
    var ref = db.ref("/");

    // Attach an asynchronous callback to read the data at our posts reference
    ref.push(
      {
        "text": req.body
      }

    );

  });

The problem is my server does not detect the request sent by client. The console.log("test") at the first line of the route does not print "test" on my console neither the console.log('Hi') ..

The server is running and either the client. I don't know why the route is not used.

Answer 1

You are almost there. You forgot one line of code and is a common error in Angular.

You forgot to subscribe to your sendText function. Your http call will not fire up if you don't subscribe to it!

this.dataService.sendtext(newtext).subscribe( data => console.log(data));