Recently I worked on a full Angular app and deployed it on SAP BTP space. Also, the app displays and saves data in on premise SAP HANA system through OData. This is a step-by-step guide which was done.

Before we begin, we need to setup a BTP space, generally this will be done by the basis team of the organization. To host / deploy an application we need to have a BTP space. We are using SAP BTP Cloud Foundry space here.

Step1: Create a BTP account or login with the credentials which Basis team has provided you.

Create space if does not exist or go into the space already created.

We need to create four services which will be bound with the app.

Four services which need to be created are:

• Connectivity service
• Destination service – both of these required to connect on-premises system to BTP
• xsuaa service – for authentication
• log – to store logs for the app

As we want to connect the on-premises system to the BTP Angular app, we need to create Destination service and configure it with on premise system. Click ‘Check Connection’ to test the connection is correctly done with on premise system or not.

To configure cloud foundry setup in angular project we required four files.

manifest.yml

Make sure you enter TENANT_HOST_PATTER is you are using the shared BTP space and buildpack as nodejs_buildpack. Otherwise, it will not work.

In package.json you have to add dependency of CDK and SAP Approuter to access the On-permises OData from Cloud/BTP. This will translate your OData URL to absolute URL and also it will avoid cross domain data access.

Rules that determine which request should be forwarded to which destination are called routes.  Configure the xs-app.json file for the routes.

You also need to configure xs-security.json and make sure that tenant-mode should be dedicated.

As shown above the services should be bind to your application, For the security service xsuaa, it need to be bind from the terminal to work correctly by the below command.

cf create-service xsuaa application xsuaa-application -c src/xs-security.json

Also, for accessing on-premise odata from Angular application, you can define a variable in your application which will have the end point of the OData services and use that in your calls.

export const env = {
  production: false,
  env: EnvironmentType.DEV,
  shouldUseOAuth: false,
  sapBaseUrl: 'https://xyz.com', // <-- this is the on premis URL for OData
  sapClient: 'sap-client=123',
  appIdBasic: '',
  incidentDestination: 'sap/opu/odata/sap/ZABC_SRV', // <-- this is the ODATA service provided from ABAP
  serviceTimeout: 120000,
};

Once this is done, we can deploy the application using the below command.

cf push

Make sure you have logged in in your BTP space using “cf login” before running the push command.

OData Part:

For OData part it can be developed using SEGW project or directly from CDS views as per requirements. Which I may add in the next blog if requested.