CODEWITHSUNDEEP
javaangularjstomcat
Sabyasachi
Sabyasachi

Reputation: 531

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

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.

enter image description here

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?

Upvotes: 3

Views: 3772

Answers (3)

Pierre
Pierre

Reputation: 2912

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.

Upvotes: 0

vinnyh
vinnyh

Reputation: 277

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

Upvotes: 2

Sabyasachi
Sabyasachi

Reputation: 531

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/

Upvotes: 1

Related Questions