Wednesday, August 9, 2017

How to set up an Angular 2 development environment connected to SAP Netweaver Gateway

In my previous blog I described how to consume SAP OData services from AngularJS and NodeJS. Since then I have been working on a project at a customer that uses Angular2 as a front-end on top of SAP Netweaver Gateway. In this blog I will describe how you can set up a development environment that uses the angular cli (command line interface) that comes with Angular2 to connect to an SAP Netweaver Gateway server.

Afbeeldingsresultaat voor angular

Installation

The first step to set up an Angular2 development environment is to install the necessary tools: NodeJS and the Angular CLI. The steps are described here. The two steps you have to do are installation of NodeJS and installation of the Angular2 CLI. 

First download and install NodeJS from here. After that launch a terminal or command prompt and install the angular CLI with the following command:

npm install -g @angular/cli

Create a new Angular2 project

Using the Angular CLI we installed, we can generate a new Angular2 project as described here.

Run the following command to create a new project:

ng new sap-app

Set up a proxy to SAP Netweaver Gateway

Now that we have the an Angular2 application set up, open your favorite IDE and open the folder that the angular CLI created for the new angular app that we generated in the previous step. I recommend Visual Studio Code. It's a great IDE with a lot of nice add-ons for Angular2/TypeScript development. Another good option is Atom. At the root folder of the project, create a new file called proxy-conf.json and paste in the following JSON:

------------------------------------------------------------------------------------------------------------------
{
    "/sap/*": {
       "target": "<your sap nw gateway host>:<your sap nw gateway port>",
       "secure": false,
       "logLevel" : "debug"
    }
 }
------------------------------------------------------------------------------------------------------------------

When you have the proxy-conf.json in place, open up the package.json file that's also located in the root folder of the project and adjust the start script command in the scripts section of the package.json file:

------------------------------------------------------------------------------------------------------------------
"scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxy-conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}
------------------------------------------------------------------------------------------------------------------

Start the application by opening up a terminal/command prompt and execute the following command in your project folder:

npm start

This command executes the command we specified in the package.json file and serves the web application for local testing during development with the proxy configuration we specified in the proxy-conf.json file. If all is well you should see something like this in your terminal / command prompt:

------------------------------------------------------------------------------------------------------------------
> sap-app@0.0.0 start /Users/arjannieuwenhuizen/Documents/angular-projects/sap-app
> ng serve --proxy-config proxy-conf.json

** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 **
 10% building modules 3/3 modules 0 active[HPM] Proxy created: /sap  ->  <gateway host>:<gateway port>
[HPM] Subscribed to http-proxy events:  [ 'error', 'close' ]
Hash: 757865f5689e1add6382                                                              
Time: 9395ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 177 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.js.map (main) 5.28 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 10.5 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.19 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]
webpack: Compiled successfully.
------------------------------------------------------------------------------------------------------------------

You can now see the application running when you open your browser and navigate to localhost:4200.

Implement an Example HTTP call to SAP Netweaver Gateway

To actually communicate with SAP NW Gateway we will use the Http module that is part of Angular2. This module is not part of your project yet, so we have to include it first. Open the app.module.ts file (located in <your app dir>\app\src) and make the following changes:

------------------------------------------------------------------------------------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
------------------------------------------------------------------------------------------------------------------

Now that we have imported the HttpModule, we are going to use it in a service. First generate a service using the following command in the terminal / command prompt in your app directory:

ng g s sap

The command is a shortcut for the command ng generate service sap that tells te angular cli to generate a new service called sap for us.

Locate the sap.service.ts file that the Angular CLI just generated and paste in the following code. Note that the base url and the collection/entity set that you are retrieving can differ from the example I am using.

-------------------------------------------------------------------------------------------------------------------
import { Injectable } from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class SapService {

  private flightUrl = '/sap/opu/odata/iwfnd/rmtsampleflight/';

  constructor(private http: Http) { }

  getCarriers() {
    return this.http.get(this.flightUrl + '/CarrierCollection')
    .toPromise()
    .then((response) => {
      return response.json();
    });
  }

}
------------------------------------------------------------------------------------------------------------------------

Now make the following changes to the app.module.ts file to tell Angular that we will use the service in our app:

------------------------------------------------------------------------------------------------------------------------
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { SapService } from './sap.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule
  ],
  providers: [SapService],
  bootstrap: [AppComponent]
})
export class AppModule { }
------------------------------------------------------------------------------------------------------------------------

Paste in the following code in the app.component.ts file, this will tell the component to call the SapService we implemented earlier to fetch the data from the SAP NW Gateway system.

------------------------------------------------------------------------------------------------------------------------
import { Component, OnInit } from '@angular/core';
import { SapService } from './sap.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  carriers;

  constructor(private sapService: SapService) { }

  ngOnInit() {
    this.getCarriers();
  }

  getCarriers() {
    this.sapService.getCarriers().then( (data) => {
      this.carriers = data.d.results;
    } );

  }
}
------------------------------------------------------------------------------------------------------------------------

Now to display the results, replace the code in the app.component.html with the following:

------------------------------------------------------------------------------------------------------------------------
<div *ngFor="let carrier of carriers">
  {{carrier.CARRNAME}}
</div>
------------------------------------------------------------------------------------------------------------------------

If all is well you should be able to see data from your SAP system! It's not that fancy yet, but it's there. Take a look at a nice UI framework like Material Design by Google for Angular 2. You can really create beautiful applications using that. Other options are Bootstrap or any other UI framework you like. Since it's plain HTML/CSS you have complete control over the look and feel of the application.

You can get the sample application from the following GIT repo at BitBucket here.

No comments:

Post a Comment