Deploying an Angular application with Forge

Forge
, , , ,
1

Hi all!
I’ve been trying to deploy an angular application with forge.
First I’ve used the jira-issue-panel template with Custom UI. Then I’ve deleted the hello-world app, and inserted the angular app into the static folder, then I built the app using npm run build, and I’ve deployed and installed with forge. I also corrected the manifest.yml, so that It is using the correct build path.
Now my application seems to be deployed, but no angular components are shown. When inspecting the HTML I can see the index.html content, but I can’t expand the app-root component, because the angular components are not generated below it. The deploy also included the scripts (including main.js which is containing the code for the custom components), but the interesting thing is that in the console I get the following errors for the script files:
Loading module from “https://a6784c00-36f9-4140-87a6-f2ccff52b4b4.cdn.prod.atlassian-dev.net/main.3bfe6f90fd2b34b7.js” was blocked because of a disallowed MIME type (“application/xml”).

Also they are responding with 403 status codes. I suspect that this could be a problem, I just don’t see any reason I’d get these errors. Also can’t find anything on the Internet regarding deploying an angular app with forge :frowning:

The angular app is working on it’s own, so no problem with that.

Is anyone aware of the issue, or could anyone help?
Best regards, Erik

2

Hi Erik,

Thanks for raising this question. Have you tried checking if your static file sources in index.html are relative paths: https://developer.atlassian.com/platform/forge/custom-ui/#accessing-static-assets ? It is possible that the 403 errors happened because of that, and potentially the disallowed MIME type as well.

Let me know how it goes.

Best Regards,
Nadya

3

Hi Nadya!
In the end I couldn’t solve the issue. I didn’t leave any absolute paths in my code. :frowning: Since this was a demo application I could go with a workaround, that I only used a Button element with a href to the URL where I ended up hosting my angular application. That way the iframe contained the application.

Maybe just an idea: I think it would be a nice addition to the forge documentation, if you’d create a demo application with custom UI in a framework, that JIRA is not necessarily familiar with (so not react :smiley: ). Otherwise I think forge is a bit bumpy to start with, if someone want’s to do something in a different framework, despite that forge and custom UI are both really nice concepts :smiley: .

Thank you for the response!
Best regards,
Erik

1 Like
4

I have embedded an angular element in a custom ui react forge app. Depending on the requirements of your app, this might be one way to do it.