Jira Plugin with Angular - How to access assets or how to add assets to <web-resource>

Stephan Hofmann February 8, 2021

In my jira plugin, I use angular to build the frontend. In angular there is typically an assets folder in the root folder. In my angular component, I reference the asset like this:

<img src="/assets/icons/my-icon.png" />

This works when I view the app with ng serve but in the jira plugin it does not work. Of course I have to add the asset folder somehow and this is what I tried so far (number in brackets is my tried attempt and not in the actual code):

1.)
<resource type="download" name="assets/icons/my-icon.png" location="client/assets/icons/my-icon.png"/>
2.)
<resource type="download" name="assets/" location="client/assets/"/>
3.)
<resource type="download" name="assets/icons/" location="client/assets/icons/"/>

None of those works unfortunately. Sure I added the tags in the scope of

<web-resource>

Like the other resources which are build on "ng build":

<resource type="download" name="runtime-es2015.js" location="client/runtime-es2015.js" />
<resource type="download" name="runtime-es5.js" location="client/runtime-es5.js" />
<resource type="download" name="polyfills-es5.js" location="client/polyfills-es5.js" />
<resource type="download" name="polyfills-es2015.js" location="client/polyfills-es2015.js" />
<resource type="download" name="main-es2015.js" location="client/main-es2015.js" />
<resource type="download" name="main-es5.js" location="client/main-es5.js" />
<resource type="download" name="styles.css" location="client/styles.css" />

I can see that there's my assets folder in the target. So in terms of delivery to jira run task this seems fine:

Screenshot 2021-02-08 at 10.34.18.png

 

Did I miss something or can give me someone any advice how to proceed here.

 

Thanks in advance

1 answer

1 accepted

0 votes
Answer accepted
Stephan Hofmann February 12, 2021

Like some in the community suggested already, I could manage to load the assets by passing the resource path to the app-root like so:

<app-root data-resources="${webResourceManager.getStaticResourcePrefix()}/download/resources/.."></app-root>

And by adding this prefix to all assets which I want to show

Suggest an answer

Log in or Sign up to answer