Forums

Articles
Create
cancel
Showing results for 
Search instead for 
Did you mean: 

Angular plugin for jira server

Martin March 27, 2019

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.

2 answers

0 votes
Chris Langenberg February 26, 2020

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

0 votes
mcander
I'm New Here
I'm New Here
Those new to the Atlassian Community have posted less than three times. Give them a warm welcome!
August 29, 2019

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);
}
});

Suggest an answer

Log in or Sign up to answer