App Entry & Bootstrapping

The of-admin plugin is a hybrid Angular application using both Angular 1.x and 2.x. But also, of-admin is extensible itself, it is the parent for all administrative interfaces of the plugins of the OF.

It contains both versions of Angular and 3rd party dependencies for both versions installed via JSPM.

Please note that some other UI plugins e.g Optimal BPM do not have their dependencies and only use what is loaded in this, the parent UI. If they want to add dependencies it has to be done manually right now, but it will be possible to add their own jspm_config files at a later point to make it possible to handle dependencies gracefully.

Upgrade adapter

We make use of the @angular/upgrade-package to seamlessly run both versions of angular together. We use the constant upgradeAdapter as a single instance of upgrade adapter across the entire app.

The variable can be imported by using:

import { upgradeAdapter } from "/admin/upgrade.adapter";

The key uses of the upgrade adapter are in:

main.ts

upgradeAdapter.addProvider() changes the app's routing structure to prefix the useValue before our routes. Importance of this is because this is our main entry point and is loaded by the browser as a resource:

upgradeAdapter.addProvider({ provide: APP_BASE_HREF, useValue: '/admin/index.html'});

upgradeAdapter.bootstrap() bootstraps the application by injecting the module mainApp into the document.body of our index.html file. This loads angular structure asynchronously to form the module:

upgradeAdapter.bootstrap(document.body, ['mainApp']);

angular1.module.ts

Our main angular component is written using Angular 2, so it needs to be downgraded and made part of mainApp module used to bootstrap application:

app.directive('bpmApp', upgradeAdapter.downgradeNg2Component(AppComponent));

#Initialization

main.ts is our entry file for jspm which is responsible for importing angular and 3rd party libraries. Calls necessary functions to bootstrap the application and initialize angular 1.x module and dependencies.

We use the function InitAngular1() which is responsible for creation of the module mainApp, adding the main component bpmApp and initializing the Angular 1.x side of the app by calling the hook_initFramework-function.

###mainApp mainAppis a normal angular 1.x module. Please note for we have to import the individual 3rd party plugins for all dependency modules that are going to be injected to our module.

We save the the module in variable named app which is used across the app to add angular structures to our module.

###bpmApp bpmAppis the main component for our app, structured as an angular 2 component. Responsible for loading other app components and configuration for routes contained in our app.

###hook_initFramework The hook_initFramework()-function is responsible for initialization of all Angular 1.x code within the of-admin plugin and other UI plugins.

It needs the main app as parameter in order to add all other angular structures to our main module.