How to use Angular with Liberty WebSphere Server

Question

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.

Answer 1

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 / .