2

I have a project at work that uses AngularJS + JSP on a Liberty WebSphere Server 17.0.0.2 and now I have to make an upgrade on it. The project needs to be upgraded to Angular 4 + Liberty and I have no idea on how to do it properly.

What I have tried by now is:

Built the project with Angular-CLI to generate the dist folder. Then, I have put the dist on WEB-INF > views. I have also made the references on spring-context.xml, web.xml and server.xml (on Liberty side) but all I get is a 404 error when trying to access localhost:9090/AngularPoC/dist/index

Thank you in advance.

Andy Guibert
  • 41,446
  • 8
  • 38
  • 61
Arthur Gomes
  • 23
  • 1
  • 5
  • When you say WEB-INF > views, do you mean in the views folder inside WEB-INF? What happens if you try to access the file as index.html instead of just index? Have you done some configuration to make it not necessary to reference the views folder in the path to your static files? – lwestby Mar 20 '18 at 21:21
  • Content in WEB-INF of a web app isn’t served up via http for security reasons, I think you need to put dust in the web app root. – Alasdair Mar 20 '18 at 23:46
  • That should have been dist not dust. Autocorrect. – Alasdair Mar 21 '18 at 03:27
  • If you hover over your message with the mouse there's a small pencil icon at the end that lets you edit. Hard to find :) – lwestby Mar 21 '18 at 13:10
  • I get the same error message for trying to access index.html and index. I've configured it to not be necessary to add **.html** to the end. – Arthur Gomes Mar 21 '18 at 15:29
  • Do you use visual studio code for your angular app development or something else? – pixel Oct 24 '21 at 14:54

1 Answers1

5

I'll write up an overview of how I set up my Angular app(s) to be served via (Open)Liberty:

  1. Copy product of the ng build command to the root of the .war file. This means putting it in a different location depending on how you do your build. If you are using Eclipse/WDT that probably means setting output to be your WebContent folder. If you are using Gradle with the war plugin, it goes right into src/main/webapp. While initially I set the output folder with ng build --output-dir=... I found that this deletes the folder, so I was losing my web.xml with each build. I would recommend copying the contents of dist in a later step of your build unless you are okay serving from a subfolder of the context root.

  2. Set up error redirection for deep links. If you use the Angular Router module, you'll need to set up linking and refreshing deep routes. By default, Liberty gives a 404 error page for any path that doesn't exist. If a user refreshes the page when the URL bar contains a deep route into your application, they'll get that error page. You'll need to set it up so that all 404 requests are routed back to your index.html (location should usually point to the same place as base-href, see below.) In web.xml, I have 

    <error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>

    Another option is to use the HashLocationStrategy which uses the older anchor syntax. The route is placed in the hash fragment of the URL. This means you don't have to set up the error page, but it also means that you won't be able to replace a deep route with a separate page seamlessly in the future--people would have to update bookmarks if they have any.

    This is done by updating your app-routing.module.ts file to specify RouterModule.forRoot(routes, {useHash: true}) on the imports line.

  3. Ensure base-href matches. Make sure the base-href in your index.html points to the path containing that index.html and your generated CSS and JS files from the build. Otherwise you'll notice nothing loads and you get a bunch of 404s in your web inspector. If the context-root changes, this value needs to be updated. My web app usually has the context-root / with index.html directly under it, so my base-href is /.

lwestby
  • 1,209
  • 6
  • 10
  • Thanks for the reminder to put JSP files in WebContent not the WEB-INF folder! Solved my problem simply dragging the jsp up to WebContent – JesseBoyd Nov 04 '18 at 03:40
  • What do you mean copy output of ng build into a war file? ng build generates dist folder with all an Angular app needs. War files are for Java web applications, I dont understand why war comes into place here as it has nothing to do with Angular? – pixel Oct 07 '22 at 21:08
  • This question is about serving an angular application using WebSphere Liberty which is a Java/Jakarta EE application server. If you want to package both the Angular frontend and a Java-based backend into the same bundle and deploy it to Liberty, you put the dist folder in the war so that you can access it under the application's context root. Sometimes it's convenient to package them together and do a sort of backend-for-frontend pattern this way. – lwestby Oct 14 '22 at 14:53