angular typescript node-red angular4-httpclient

Node-red HTTP GET Request in Angular 4 webapp

I'm building a service that use Node-red only to send email when a GET request to 127.0.0.1:1880/hello (node-red port) are triggered and an Angular 4 webapp (127.0.0.1:3000) to client access.

When i access thr /hello page from browser, i get an e-mail from node-red in my personal e-mail account.

The problem is that when press the button for test an http get request to node-red, nothing happens.

Using Ubuntu 16.04 LTS

node 8.15

npm 6.4

Node-RED 0.20.2

The node-red flow:

NODE-RED FLOW SEND EMAIL IMAGE

[{"id":"35dcdbd9.a99684","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"dcdb9a4e.db2eb8","type":"debug","z":"35dcdbd9.a99684","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":450,"y":180,"wires":[]},{"id":"aa98d38f.846af","type":"e-mail","z":"35dcdbd9.a99684","server":"smtp.gmail.com","port":"465","secure":true,"tls":true,"name":"andre.def93@gmail.com","dname":"","x":500,"y":320,"wires":[]},{"id":"f1aea493.ec0e78","type":"http response","z":"35dcdbd9.a99684","name":"","statusCode":"","headers":{},"x":670,"y":260,"wires":[]},{"id":"747c3f58.892dd","type":"http in","z":"35dcdbd9.a99684","name":"","url":"/hello","method":"get","upload":false,"swaggerDoc":"","x":120,"y":260,"wires":[["dcdb9a4e.db2eb8","aa98d38f.846af","f1aea493.ec0e78"]]}]

Angular 4.1.3 app

My component.ts:

[...]
import { Http } from '@angular/http';
[...]
    constructor(
        private http: Http,
        [...]
    ) { }
[...]
    test(){
       this.http.get('http://127.0.0.1:1880/hello');
    }
[...]

My component.html:

[...]
<button class="primary" (click)="test()">
    <div *ngIf="!issueInProgress">
        <span>TEST</span>
    </div>
</button>
[...]

Thank you all folks!

Solution

There are many possible problems. First, i recommend you use http client.

(in App Module):

import { HttpClientModule } from '@angular/common/http';
imports: [ .. ,HttpClientModule, .. ]

(in Component.ts (Is better in a service)

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

.... 

 constructor(private http: HttpClient){}

test(){
 this.http.get<any>('http://127.0.0.1:1800/hello').subscribe(data=>{
 console.log("Work, recive: " + data);
},
err =>{
 console.log("Err, recive: " + err);
},
() => {
 console.log("Finish");
});
}

in this way, you will be able to see what the error is and why it is not working.

if is a CORS error, try:
https://github.com/node-red/node-red/issues/1347#issuecomment-363451534
or
https://thefrinkiac7.wordpress.com/node-red/enable-cors-with-node-red/

:) Bye!