Custom application Integegrate on Cumulocity

I have a custom application developed standalone using angular 4 and bootstrap version 3.

I do build a custom application using angular-cli using 'ng build' command. I want to integrate this application with cumulocity.

Can someone suggest the approach to integrate this application with Cumulocity considering this standalone application need to work standalone as well and within cumulocity as well?

I want to follow cumulocity brandings also. (I can modify my less files to use Cumulocity variables)

You can simply to the ng build, zip everything in the dist folder and then upload it as a custom application. The application will then run in the context of your Cumulocity tenant.

To connect to the REST endpoints of Cumulocity (documentation) you need to configure basic auth with your username and password. If you are using the ng2 http client you can do that the following way:

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';

@Injectable()
export class ApiService {

   constructor(private http: Http) {}

   call(url): Observable<any> {
      let username: string = 'username';
      let password: string = 'password';
      let headers: Headers = new Headers();
      headers.append("Authorization", "Basic " + btoa(username + ":" + password)); 
      return this.http.get(url, {headers: headers})
    }
}

However, remember that you should not write the username and password fixed into the application because everyone could read it then. Better is to use a form to authenticate the user and only use it in the context of your Single Page Application.

For branding, you can find the defined less variables in the examples.