Angular plugin for jira server

[Martin]

Hi I need create plugin for jira server, code is completely written in external angular app. What I want is display whole angular application in jira like plugin. Is it possible to do that ? I have only basic knowligde of java. Any tutorial for that ? Many Thanks.

[Chris Langenberg]

Hey there,

i created a little guide, to demonstrate how Angular can be integrated into Jira. You can give it a read if you want and you are still interested.

https://github.com/scitotec/angular-in-jira

[mcander]

You need a base DOM element on which initialize angular entry component like below.

dynamic.loader.ts

import {Type, ApplicationRef, ComponentFactoryResolver, Component, ComponentRef, Injector, NgZone} from '@angular/core';

export class DynamicNg2Loader {
  private appRef: ApplicationRef;
  private componentFactoryResolver: ComponentFactoryResolver;
  private zone:NgZone;

  constructor(private injector:Injector) {
    this.appRef = injector.get(ApplicationRef);
    this.zone = injector.get(NgZone);
    this.componentFactoryResolver = injector.get(ComponentFactoryResolver);
  }

  loadComponentAtDom<T>(component:Type<T>, dom:Element, onInit?: (Component:T) => void): ComponentRef<T> {
    let componentRef;
    this.zone.run(() => {
      try {
        let componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
        componentRef = componentFactory.create(this.injector, [], dom);
        onInit && onInit(componentRef.instance);
        this.appRef.attachView(componentRef.hostView);

      } catch (e) {
        console.error("Unable to load component", component, "at", dom);
        throw e;
      }
    });
    return componentRef;
  }
}

main.ts

import {enableProdMode} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';

import {AppModule} from './app/app.module';
import {environment} from './environments/environment';
import {AuditComponent} from "./app/audit/audit.component";
import {DynamicNg2Loader} from "./app/dynamic.loader";
import {disableDebugTools} from "@angular/platform-browser";

if (environment.production) {
  disableDebugTools();
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule).then(function (ng2ModulerRef) {

  let ng2Loader = new DynamicNg2Loader(ng2ModulerRef.injector);
  let container = document.getElementById('audit-trigger');

  console.log("Containers");
  console.log(container);


  let loadedComponentReferences = [];
  let count = 0;

  if (container) {
    let parent = document.createElement('audit-components');
    container.appendChild(parent);

    let compRef = ng2Loader.loadComponentAtDom(AuditComponent, parent, (instance) => {
      instance.value = count;
    });
    loadedComponentReferences.push(compRef);
  }
});