How to integrate angular 2+ app to Openfin platform

Question

I need to integrate my existing angular 5 app in openfin (specifically using wpf embedded view) . I will need to communicate with the embedded app using the Interapplication bus. I can't find an example of how I can integrate this into my component.

Answer 1

Ok - I figured this out finally.

There are few things to do to get this working. First of all, tell typescript compiler about the type by including @types/openfin - npm package. You will notice that the editor will start recognising the type in its intellisense, but when you build the app, the typescript compiler will throw an exception - 'cannot find name 'fin'.

To fix this, open up your tsconfig.json and make sure you include either:- 1. Entire @types folder in typeroots 2. fin types within 'types' array.

{ .. "target": "es5", "typeRoots": [ "node_modules/@types" ], ... } }

After this change, the app should compile without any typescript error.

Now, in you app component, you need a way to find whether the app is running under open fin. Once fin variable is available, we can use InterApplication bus and all other openfin goodness. A basic app component might looks like this:-

    import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'test-ang';
  version: string;

  private _mainWin: fin.OpenFinWindow;

  constructor() {
    this.init();
  }

  init() {
    try {
      fin.desktop.main(() => this.initWithOpenFin());

    } catch (err) {
      this.initNoOpenFin();
    }
  };

  initWithOpenFin() {
    this._mainWin = fin.desktop.Window.getCurrent();

    fin.desktop.System.getVersion(function (version) {
      try {
        this.version = "OpenFin version " + version;
      } catch (err) {
        //---
      }
    });

  }

  initNoOpenFin() {
    alert("OpenFin is not available - you are probably running in a browser.");
  }

}