SOAP - WSDL request angular2/4 framework

Question

Still I am learning angular2. I am trying to learn how to send SOAP request to a web service, with a WSDL. I was searching for some examples and found one. I created a button and wanted to call that soap function to send request to server on a click. The project is successfully built but the function doesn't work.

 app.component.ts

   import { Component } from '@angular/core';
   import { Http, Response, RequestOptions, Headers} from '@angular/http';
   import 'rxjs/add/operator/map';
   declare var angular: any;

  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
  })

export class AppComponent {

soapCall() {

     angular.module('myApp', ['angularSoap']);
     var xmlhttp = new XMLHttpRequest();
          xmlhttp.open('POST', 'http://localhost/webservices/voltage-info-service/server/server.php', true);

//the following variable contains my xml soap request (that you can get thanks to SoapUI for example)

      var sr = 'YEAH';
           // '<?xml version="1.0" encoding="utf-8"?><lfc:requests><lfc:request><lfc:busID>66</lfc:busID><lfc:timestamp>223456789</lfc:timestamp><lfc:coordinates>'+
           // '<lfc:LongD>8</lfc:LongD><lfc:LongM>6</lfc:LongM><lfc:LongS>25.599</lfc:LongS><lfc:LatD>51</lfc:LatD><lfc:LatM>33</lfc:LatM><lfc:LatS>23.9898</lfc:LatS>'+
           // '</lfc:coordinates></lfc:request></lfc:requests>';

        xmlhttp.onreadystatechange = () => {
            if (xmlhttp.readyState == 4) {
                if (xmlhttp.status == 200) {
                    var xml = xmlhttp.responseXML;
  //Here I'm getting the value contained by the <return> node
                    console.log('Work!!');                                                                 //I'm printing my result square number
                }
            }
        }

        // Send the POST request

        xmlhttp.setRequestHeader('Content-Type', 'text/xml');
        xmlhttp.responseType = "document";
        xmlhttp.send(sr);
  }
  }

 **app.component.html**

 <u1>
 <u1>
    <input type="button" value="SOAP request" ng-click="soapCall()">
</li>
</ul>

Answer 1

The errors don't show any SOAP related errors. All the errors tell that the property doesn't exist in the AppComponent.

Modify soap method code as below

soapCall() {
    const xmlhttp = new XMLHttpRequest();
    xmlhttp.open('POST', 'http://localhost/webservices/voltage-info-services/wsdl/sgcc3.wsdl', true);
    const input_element = <HTMLInputElement> document.getElementById('choosenNumber');

    console.log('chVal : ' + input_element.value);
    const choosenNumberValue = input_element.value;

    // The following variable contains the xml SOAP request.
    const sr =
        `<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:mat="http://mathsutility.test.com/">
           <soapenv:Header/>
             <soapenv:Body>
               <mat:carreNombre>
                 <arg0>` + choosenNumberValue + `</arg0>
               </mat:carreNombre>
             </soapenv:Body>
           </soapenv:Envelope>`;

    xmlhttp.onreadystatechange =  () => {
        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                const xml = xmlhttp.responseXML;
                // Here I'm getting the value contained by the <return> node.
                const response_number = parseInt(xml.getElementsByTagName('return')[0].childNodes[0].nodeValue);
                // Print result square number.
                console.log(response_number);
            }
        }
    }
    // Send the POST request.
    xmlhttp.setRequestHeader('Content-Type', 'text/xml');
    xmlhttp.responseType = 'document';
    xmlhttp.send(sr);
  }