Problem for deploying angular js app in WAS server

Question

I am trying to pack my spring boot webservice and angular 6 app in an war so it can be deployed in WAS 8.5 server. I have made a sample app on angular and did "ng build --prod". Then followed this answer Is it possible to deploy Angular app on IBM Websphere Application Server? . I have copied output of /dist folder of the angular app to web module and added web.xml.

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<display-name>Spring Boot Liberty</display-name>

<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

After I tried to deploy the war and display the page,it is giving blank page. backend rest service is working fine.So I am probably missing some library or some files to run the angular js part or may be some other step.

Please help.

Do you see errors in the browser console or the server's SystemOut.log? — lwestby
@lwestby no,I finally understood the problem i.e. index.html is loading but not any resources. server is unable to find the image path,css/js path.so what I did is edidted the path like <script type="text/javascript" src="/HelloWorld/runtime.06daa30a2963fa413676.js"></script>.This did solve the issue for this dummy app,but I am wondering if there is any other way to automate /edit this resource path,may be some entry in web.xml??because for actual project this will be a headache for sure. — juneSakura

lwestby lwestby · Accepted Answer · 2018-12-01T17:26:54

Probably what is happening is that your Angular app is unaware of the context root of your application--this is why you are able to get things working by manually editing the paths of the linked resources in the already-built html file.

There are two ways to handle this:

Edit the index.html file in your Angular project (not the one generated by the Angular compiler.) Look for a tag <base href="/"> (or some other value in the quotes) and edit it to include the context root of your application. In your comment you mentioned a path with /HelloWorld in it, so I assume the tag should look like <base href="/HelloWorld">.
Change the context-root of your application to match the value already provided for <base href>.

Once you make one of these changes, the paths that the built index.html looks for its linked .js/.css files should line up with the path the application server is actually serving them at, and you should see your page.

If you still don't see what you expect, right click on the page in your browser and click Inspect element. Go to the tab probably named Console and look for any errors there. That should give you a clue on what else might be going wrong.

Problem for deploying angular js app in WAS server

1 Answers