7

I want to accept post request to my Angular application from other application.

Basically they will send customer id list as a POST payload and I have to process it in my angular application & render GUI.

I tried following app.post method in app.js but It throws error "Cannot do POST"

app.post('/customer', function (req, res) {
    console.log(req.body);
});

It is a bit awkward requirement since Angular is JavaScript framework and It does not accept post request because post request needs to be handled at server side only not at client side.

But Is there any work around like accept post request in Node JS and send to angular application and render UI ? Might be a dumb idea so need some idea or work around at least.

Edit:= More Information

I have Node JS application which is mainly to get live data feed through socket.io.

Pushkar Rathod
  • 353
  • 2
  • 7
  • 26
  • 1
    So you have a server side, node or something similar? The node server could receive the request without a problem and hold/store it and your angular app poll every so often to see if the data is there. Or websockets/socketIO would work to push the data from the server to the app. – Steve Jun 17 '19 at 22:16
  • I have node js application which push data to angular app. I got your idea to receive post data in node but how can I push this data to my angular app ? More than 3k users going to post the request so how will identify to which customer I need to push data. And in a post they want GUI as a response. Don't know how to achieve it. – Pushkar Rathod Jun 18 '19 at 01:41

4 Answers4

3

Well, Angular is Front-end framework. You cannot accept POST request from angualar. But you can achieve this by making use of any server-side service like nodejs or java. You can use nodejs for the same. 1. Create a server-side using express or any other framework in nodejs. 2. Your client then have to POST their cutomer id or other data onto that server. 3. Use a database such as mongodb to store data. 4. Then, atlast you need to get data from your server using GET request. It's simple as that.

Like you said in the end, you got a nodejs app having socket.io, well that's good you can get live data by listening to events emitted by socket.io when your client post data. Then you can show those data in your angular app. This can be accomplished with socket.io-client in angular. But, remember you have to send a GET request to server to fetch data again from database(if you're storing them) everytime you restart the application as angular is only a front-end framework. Hope this helps you. You can comment if you got any question. I'll be happy to help!

Satnam112
  • 242
  • 1
  • 10
  • Yes Satnam. I know that Angular do not accept POST request. The process which you explain already thought in my mind and it bit lengthy but again challenge how to send respond to particular customer because websocket need to send response only who has requested not to all. I hope you understand my question. – Pushkar Rathod Jun 18 '19 at 19:49
  • Let me explain to you briefly how sockets work. Sockets basically creates a room, a user can join a room. A room can have many number of users joined. Now, when a joined user emit an event(in your case it is a request to get data) socket will listen for that event and responds by emitting another event which a user is listening to, now this event is emitted in that room. And all the user joined in that room as well as listening to event emitted by socket will get data. This is how sockets work. – Satnam112 Jun 19 '19 at 02:36
  • Now you can do two things-1. Creating separate room for each user(which I don't recommend as it will be difficult to handle) 2. Don't use sockets, create a REST api instead (which I recommend you to use), in REST user will send GET request and only that user will get response. If you still got any question you can ask – Satnam112 Jun 19 '19 at 02:39
  • Client has his own application where they will load my app in iFrame. In their application they have form with submit button. Once they click on submit button thousands of customer ids they want to send to my app and I want to receive those ids in my app and display the result in iFrame. I hope you got the scenario now. – Pushkar Rathod Jun 19 '19 at 02:49
  • I recommend you to make a REST api using express in node server. Then your client will send POST request to your node server, then you can send GET request to the server to get data and display results in your angular app. Hope this makes sense to you. – Satnam112 Jun 19 '19 at 03:30
  • I got you upto GET request. But how socket will send GET result to my angular app ? They are so many clients who will request the info. From socket how to push particular data to particular client only ? If You & Me both request for the data for different customer id, you should get result only for your customer id not mine. I hope you got my question. – Pushkar Rathod Jun 19 '19 at 17:13
  • Sockets are mainly used to get live data. As I told you earlier, socket uses the concept of rooms i.e. every user of a particular room will get data emitted by socket. That's why I suggested you to make a REST api instead and don't use socket (as your requirement is to send data to particular user and it will be difficult to handle with rooms in socket). In REST only a particular user will get data. Hope it's clear to you now. – Satnam112 Jun 19 '19 at 17:34
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/195220/discussion-between-pushkar-rathod-and-satnam112). – Pushkar Rathod Jun 19 '19 at 20:24
1

You need to use Angular universal. Here is the official guide Angular universal app

Then in the file server.ts

You could accept post requests by adding.

 server.post('/customer', (req, res) => {
         console.log(req.body);

 });

If you want to get the body you can check those answers.

Marc Claramunt Molet
  • 81
  • 2
  • 5
0

Yes, you need a server side server to receive an request (GET or POST), like express.js. If you use the same server for Angular and Express, you do a POST to localhost:3000/api/customer, and express will response with JSON or something.

Angular is Client-Side, so, the POST, come from Client Computer. You doesn't need to worry about which customer you need to response.

Gabriel Lopes
  • 183
  • 3
  • 12
  • Thanks for comment. Let's take an example. You and me both have opened Angular APP and from other app we do post request. Now these both post requests Node will receive and send to Angular app so how Angular app will decide which result to display you and me. And big question for me how to send this POST data from Node to Angular APP ? – Pushkar Rathod Jun 18 '19 at 05:35
  • Node will decide which client to response, using your public IP. Remember, Angular is Client-Side, so when we do a POST, Node receive a POST by 172.125.15.28 (my public IP) and 129.168.175.111 (your public IP), then, he does all the logics and response to each IP. – Gabriel Lopes Jun 18 '19 at 14:24
  • Actually, Angular do the POST and Node will response. Using module @angular/common/HTTP. It's automatic which Angular App node will response. – Gabriel Lopes Jun 18 '19 at 14:28
  • I want to POST to Angular. Not from Angular. I know this module and using to make a call to REST API. – Pushkar Rathod Jun 18 '19 at 19:45
  • You can't, Angular don't listen to requests. But you can open a socket (by sending a HTTP GET to Socket.io, for exemple) and listen, so the backend send data to angular without angular ask. What do you want to do specifically? – Gabriel Lopes Jun 18 '19 at 20:36
  • If you need to send notifications to all users without him asking, you can use Push Notifications. – Gabriel Lopes Jun 18 '19 at 20:42
  • Client has his own application where they will load my app in iFrame. In their application they have form with submit button. Once they click on submit button thousands of customer ids they want to send to my app and I want to receive those ids in my app and display the result in iFrame. I hope you got the scenario now. – Pushkar Rathod Jun 19 '19 at 02:03
  • Since the request doesn't came from your Iframe, you can't send the result to iframe. I suggest to save this ids in cookie or local storage, and simulate a click on iframe, then your iframe get the ids where you left, (cookies, local storage) and send to you application, your app will send back the info you need to Iframe directly. I hope it helps. – Gabriel Lopes Jun 19 '19 at 23:05
-1

Seeing that Angular is a front end technology, it is almost impossible to do receive post requests. This is because Angular, by default, creates a server and runs it on 'ng serve' and you might really not have access to this server.

However, on deploying your application, you might need to create your own server (eg when deploying to heroku). When you create your server.js file, you can handle all kinds of api calls from your server file.

The problem with this, however, is that you those requests will not work on your local machine, because the server you have just created does not work on localhost.

const PORT = process.env.PORT || 8905;
const path = require('path');
const express = require('express');
const forceSsl = require('force-ssl-heroku');
const app = express();

app.use(forceSsl);
app.use(express.static(__dirname + '/dist/fenix-school'));
app.use(express.json());

app.post('/payment/success', (request, response) => {
  response.json(request.body)
});

app.get('*', (request, response) => {
  console.log('route hit');
  response.sendFile(path.join(__dirname + '/dist/fenix
 school/index.html'));
});

app.listen(PORT, () => console.log(PORT));

Here, I have created created a server and let it handle a post request by just returning the request body

1

On the other hand, this is a post request from using postman, and it works (I cleared out the url before taking the screenshot)

Peter Csala
  • 17,736
  • 16
  • 35
  • 75
DAVID IKE-NJOKU
  • 1
  • 3