Deploying Angular applications with Verj

Post any questions you have about using the Verj.io Studio, including client and server-side programming with Javascript or FPL, and integration with databases, web services etc.

Moderators: Jon, Steve, Ian, Dave

Segi
Ebase User
Posts: 649
Joined: Mon Dec 09, 2013 6:37 pm

Deploying Angular applications with Verj

#1

Postby Segi » Thu Nov 29, 2018 5:07 pm

Our companies' Intranet is powered by Verj 5.4.

I developed an Angular app that renders an Intranet menu by making a REST call to get all of the Intranet applications (which are Verj projects) that the user is allowed to access. The REST call returns an object and the Angular app renders an Angular Material menu. This was tested and works perfectly with the Angular local dev server.

I built a production build of this Angular app with the base-href (root path of the Angular app) as /ufs/IntranetMenu, deployed the app to this location and attached /ufs/IntranetMenu/index.html as a top JSP to a form.

I noticed a really strange side effect when loading the Verj form that has the Angular app attached as a JSP. The Intranet menu does load correctly but the browser dev console starts to show many 404 errors (which are only there when the Angular app is attached to the form as a JSP). Unassigning the Angular app as a top JSP causes the 404 errors to go away.

I found out that Angular is somehow causing an htaccess like rewrite for other resources used by the Verj Form.

For example if the URL for an image is https://intranet.mysite.com/ufs/shared/images/left1.gif, when the Angular app is attached as a JSP, Angular is causing the URL to be rewritten as https://intranet.mysite.com/ufs/IntranetMenu/shared/images/left1.gif.

This is causing the page to not render correctly because the image doesn't obviously exist in this location.

I know that there's nothing specifically in my Angular app that is causing this kind of behavior. I tested it out by creating a new Angular project which renders the text "Simple App" and nothing more. After building it, deploying it and attached it as a jsp, I saw the same rewritten URL 404 errors in the browser dev console..

Has anyone else encountered this ? Is there a way on the Tomcat/Verj side to specify that an embedded jSP should be completely encapsulated ?
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

Re: Deploying Angular applications with Verj

#2

Postby Jon » Fri Nov 30, 2018 8:55 am

Have you tried putting it in an iframe instead of the top JSP i.e. put an <iframe> tag in an HTML control. This should give you the isolation.
0 x

Segi
Ebase User
Posts: 649
Joined: Mon Dec 09, 2013 6:37 pm

Re: Deploying Angular applications with Verj

#3

Postby Segi » Mon Dec 03, 2018 4:09 pm

Jon,

I did try that. The biggest issue is that referencing the HTML file in an HTML control using an iframe results in the iframe being shows in a small non-resizable square.

An HTMLcontrol doesnt have a style property so theres no way to adjust its css properties
0 x

Jon
Moderator
Moderator
Posts: 1342
Joined: Wed Sep 12, 2007 12:49 pm

Re: Deploying Angular applications with Verj

#4

Postby Jon » Mon Dec 03, 2018 5:19 pm

I think you need to specify width and height on the <iframe> tag. Here's an example:

<iframe class="embed-responsive-item" width="100%" height="100%" src="https://www.youtube.com/embed/C8LjYMfA30Q?rel=0" frameborder="0" allowfullscreen></iframe>

This example also specifies width and height of 100% in the embed-responsive-item CSS class - not sure how much difference this makes.
0 x


Who is online

Users browsing this forum: Google [Bot] and 6 guests