Angular App on Tomcat Server: Unable to find /app.js 404 Error

Question

I have deployed my Angular APP on Tomcat Server by manually copying all the files to /webapps/(mp app) folder .

The index.html does load when I open http://localhost:8080/bar-chart-4/.

But , Tomcat cant find any .js files defined in the index.html, due to Resource Not Found 404 Error and the page is not rendered properly. The screenshot of Errors shown by debugging Page with F12 is shown in image below.

All .js files in index.html have been declared relative to project root folder. Can someone help me to configure Tomcat to find the files in my Project Folder without making changes to the index.html file?

Possible duplicate of [How to serve static files in my web application on Tomcat](http://stackoverflow.com/questions/22965738/how-to-serve-static-files-in-my-web-application-on-tomcat) — Jossef Harush Kadouri, Jul 03 '16 at 14:25
Trying opening this on browser: http://localhost:8080/bar-chart-4/main.css — Raphael Amoedo, Jul 03 '16 at 14:32
Hi @RaphaelAmoedo....I got it to work. I added this line in my server.xml file and then my page rendered perfectly on opening http://localhost:8080/bar-chart-4/ — Sabyasachi, Jul 03 '16 at 14:39

score 2 · Answer 1 · answered Aug 29 '18 at 11:07

I had the same issue with an Angular application running under Tomcat. Using Context docBase will affect all apps on the server I think. I found that a better solution was to use base-href during the build step in Angular.

e.g. ng build --base-href /bar-chart-4/

Have a look here for more info which explains it in detail: https://angular.io/guide/deployment

score 1 · Answer 2 · answered Jul 03 '16 at 14:40

1

I added this line in my server.xml file .

Context docBase="/bar-chart-4" path=""

And now the app loads fine on opening http://localhost:8080/bar-chart-4/

answered Jul 03 '16 at 14:40

Sabyasachi

411
4
9
21

I have multiple apps deployed in tomcat. I hope that adding this change to server.xml will not hamper my other deployed apps on Tomcat? – Sabyasachi Jul 03 '16 at 14:51

score 0 · Answer 3 · answered Jan 08 '20 at 15:32

in your package.json, you could set the base-href when you build the "dist":

{
  "name": "projectname",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href /bar-chart-4/",
... snip...
}

This will prepend "/bar-chart-4/" in front of all your references:

<body>
  <app-root></app-root>
    <script src="/bar-chart-4/runtime-es2015.js" type="module"></script>
    <script src="/bar-chart-4/runtime-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/polyfills-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/polyfills-es2015.js" type="module"></script>
    <script src="/bar-chart-4/styles-es2015.js" type="module"></script>
    <script src="/bar-chart-4/styles-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/vendor-es2015.js" type="module"></script>
    <script src="/bar-chart-4/vendor-es5.js" nomodule defer></script>
    <script src="/bar-chart-4/main-es2015.js" type="module"></script>
    <script src="/bar-chart-4/main-es5.js" nomodule defer></script>
</body>

NOTE: I, too, had to do this because I'm deploying the client UI (angular) "dist" folder as part of a Spring application WAR file [deployed on tomcat] and we always define a context root (ex: https://myserver.ext/myApp). So I have a gradle bruild script in my application which calls NpmTask "run build" and my package.json defines the context root (ng build --base-href /myapp) as defined above. That way, I can code the UI using the rapid "ng serve" and I can also build the dist and define the context root in the "ng build" for when I deploy a new version to tomcat.

Angular App on Tomcat Server: Unable to find /app.js 404 Error

3 Answers3