Skip to content

Commit

Permalink
Merge pull request #23 from lula/angular6-cli-ilb
Browse files Browse the repository at this point in the history 
angular6-cli-lib
  • Loading branch information
@lula
lula authored Aug 8, 2018
2 parents 8809635 + 4c88c06 commit b81302a
Show file tree
Hide file tree
Showing 97 changed files with 16,246 additions and 19,715 deletions.
8 changes: 8 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,11 @@
# 0.3.0-beta1
Project recreated with Angualr 6 CLI.

...

# 0.2.2-beta6
Call operation with client method.

# 0.2.2-beta3
### Breaking Changes
Web Service operations have no callback anymore. Callback has been replaced by a Promise.
Expand Down
188 changes: 18 additions & 170 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,185 +1,33 @@
# ngx-soap

Simple SOAP client for Angular 5 based on amazing [node-soap](https://github.com/vpulim/node-soap) library which apparently should only work in a node ambient and not in browsers.
Simple SOAP client for Angular 6 based on amazing [node-soap](https://github.com/vpulim/node-soap).

WSDL definitions generator is based on [json2ts](https://github.com/GregorBiswanger/json2ts), which is copied in tools/main.ts and updated a little given initial test cases I worked with.
Project has been recreated from scratch with Angualr 6 CLI.

Still at a very early stage.
## npm

## Installation
1. install ngx-soap and dependencies

`npm install --save ngx-soap`
`npm install --save ngx-soap`

## Usage
`npm install --save buffer concat-stream core-js crypto-js events lodash sax stream uuid`

Install `ngx-soap`:

`npm install --save ngx-soap`

Import NgxSoapModule in app module:
2. Add NgxSoapModule to your app module

```
import { NgxSoapModule } from 'ngx-soap';
...

@NgModule({
imports: [
...,
NgxSoapModule
],
...
})
export class AppModule { }


Let's use the `calculator.wsdl` definitions ([complete wsdl](http://www.dneonline.com/calculator.asmx?WSDL)):

<?xml version="1.0" encoding="utf-8"?>
<wsdl:definitions
xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
xmlns:tm="http://microsoft.com/wsdl/mime/textMatching/"
xmlns:soapenc="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:mime="http://schemas.xmlsoap.org/wsdl/mime/"
xmlns:tns="http://tempuri.org/"
xmlns:s="http://www.w3.org/2001/XMLSchema"
xmlns:soap12="http://schemas.xmlsoap.org/wsdl/soap12/"
xmlns:http="http://schemas.xmlsoap.org/wsdl/http/" targetNamespace="http://tempuri.org/"
xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/">
<wsdl:types>
<s:schema elementFormDefault="qualified" targetNamespace="http://tempuri.org/">
<s:element name="Add">
<s:complexType>
<s:sequence>
<s:element minOccurs="1" maxOccurs="1" name="intA" type="s:int" />
<s:element minOccurs="1" maxOccurs="1" name="intB" type="s:int" />
</s:sequence>
</s:complexType>
</s:element>
<s:element name="AddResponse">
<s:complexType>
<s:sequence>
<s:element minOccurs="1" maxOccurs="1" name="AddResult" type="s:int" />
</s:sequence>
</s:complexType>
</s:element>
</s:schema>
</wsdl:types>
<wsdl:message name="AddSoapIn">
<wsdl:part name="parameters" element="tns:Add" />
</wsdl:message>
<wsdl:message name="AddSoapOut">
<wsdl:part name="parameters" element="tns:AddResponse" />
</wsdl:message>
<wsdl:portType name="CalculatorSoap">
<wsdl:operation name="Add">
<wsdl:documentation
xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/">Adds two integers. This is a test WebService. ©DNE Online
</wsdl:documentation>
<wsdl:input message="tns:AddSoapIn" />
<wsdl:output message="tns:AddSoapOut" />
</wsdl:operation>
</wsdl:portType>
<wsdl:binding name="CalculatorSoap" type="tns:CalculatorSoap">
<soap:binding transport="http://schemas.xmlsoap.org/soap/http" />
<wsdl:operation name="Add">
<soap:operation soapAction="http://tempuri.org/Add" style="document" />
<wsdl:input>
<soap:body use="literal" />
</wsdl:input>
<wsdl:output>
<soap:body use="literal" />
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
<wsdl:binding name="CalculatorSoap12" type="tns:CalculatorSoap">
<soap12:binding transport="http://schemas.xmlsoap.org/soap/http" />
<wsdl:operation name="Add">
<soap12:operation soapAction="http://tempuri.org/Add" style="document" />
<wsdl:input>
<soap12:body use="literal" />
</wsdl:input>
<wsdl:output>
<soap12:body use="literal" />
</wsdl:output>
</wsdl:operation>
</wsdl:binding>
<wsdl:service name="Calculator">
<wsdl:port name="CalculatorSoap" binding="tns:CalculatorSoap">
<soap:address location="http://www.dneonline.com/calculator.asmx" />
</wsdl:port>
<wsdl:port name="CalculatorSoap12" binding="tns:CalculatorSoap12">
<soap12:address location="http://www.dneonline.com/calculator.asmx" />
</wsdl:port>
</wsdl:service>
</wsdl:definitions>

The WSDL must be read by the client (e.g with an http request) and its content used with SOAPService service. In the example app the WSDL is served from `assets` folder.

Import SOAPService and inject it in your component, then:

1. get WSDL content
2. create the client with the WSDL content definitions
3. call the operation with a JSON input. The client operation method is created dynamically (from the WSDL), therefore it cannot be part of the typescript definitions. You can extend typescript definitions or cast the client to `any` type for instance. The operation returns a callback with the following parameters:
- err: error, if any
- wsurl: operation URL from WSDL to be used in the HTTP request
- headers: HTTP headers you may use in the HTTP request
- xml: the input body parsed as xml text to be used in the HTTP request
4. call the operation URL from WSDL with operation parameters (url, xml, headers)
5. parse xml response into json

```
constructor( private http: Http, private soap: SOAPService) { }
ngOnInit() {
// 1. get wsdl content
this.http.get('/assets/calculator.wsdl', {responseType: 'text'}).subscribe(response => {
if (response) {
// 2. create the client
this.client = this.soap.createClient(response);
}
});
}
sum() {
const body: CalculatorWS.Input = {
intA: 1,
intB: 2
};
// call the operation
this.client.operation('Add', body)
.then(operation => {
if (operation.error) {
console.log('Operation error', operation.error);
return;
}
const url = operation.url.replace('http://www.dneonline.com', '/calculator');
this.http.post(url, operation.xml, { headers: operation.headers, responseType: 'text' }).subscribe(
response => {
const xmlResponse = response;
// 5. parse xml response into json
const jsonResponse = this.client.parseResponseBody(response);
@NgModule({
imports: [ NgxSoapModule, ... ]
...
```
try {
const message = jsonResponse.Body.AddResponse.AddResult;
} catch (error) {
console.log(error);
}
},
err => {
console.log('Error calling ws', err);
}
);
})
.catch(err => console.log('Error', err));
}
```
## Local tests
Besides `this.client.operation` method to get operation data you can also call the operation method directly, like:
1. `git clone -b angular6-cli-ilb https://github.com/lula/ngx-soap.git`
2. `cd ngx-soap && npm install`
3. `ng build ngx-soap`
4. `ng serve`
(this.client as any).Subtract(body)
.then(operation => ...)
.catch(err => ...);
See example app under `src/app`
See full [example app](https://github.com/lula/ngx-soap/tree/master/example) in `example` folder.
168 changes: 168 additions & 0 deletions angular.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,168 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngx-soap-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/ngx-soap-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "ngx-soap-app:build"
},
"configurations": {
"production": {
"browserTarget": "ngx-soap-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngx-soap-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
{
"input": "node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
},
"styles.css"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ngx-soap-app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngx-soap-app:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"ngx-soap": {
"root": "projects/ngx-soap",
"sourceRoot": "projects/ngx-soap/src",
"projectType": "library",
"prefix": "lib",
"architect": {
"build": {
"builder": "@angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/ngx-soap/tsconfig.lib.json",
"project": "projects/ngx-soap/ng-package.json"
},
"configurations": {
"production": {
"project": "projects/ngx-soap/ng-package.prod.json"
}
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "projects/ngx-soap/src/test.ts",
"tsConfig": "projects/ngx-soap/tsconfig.spec.json",
"karmaConfig": "projects/ngx-soap/karma.conf.js"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"projects/ngx-soap/tsconfig.lib.json",
"projects/ngx-soap/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "ngx-soap-app"
}
Loading

0 comments on commit b81302a

Please sign in to comment.