Failed to load resource (JS files) with Angular2 / Tomcat

Question

I'm trying to deploy my angular2 webapp on a Tomcat server. With the ng buildcommand I've been creating a dist folder and uploading that folder to my Tomcat.

Whenever I run my webApp I get the folowing error messages: Failed to load resource: the server responded with a status of 404 ()

These resources are my .js files that have been created by the ng build command. (eg: main.bundle.js)

It feels like he maps them incorrectly because he is searching for them on 8080/main.bundle.js instead of 8080/contextpath/main.bundle.js

This is my index.html: `

    <!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>DummyTitle</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="scripts.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>

` --EDIT-- I've found the solution, I've just addes /dist to the base href in the index.html. Now it loads in the .js correctly.

HOWEVER there's a new problem now. My URL changes immediatly. So 8080/dist/ changes to 8080/dist/login?returnUrl=%2F as soon as I enter the website. This becomes a problem if I refresh the page, I get a 404.

--EDIT 2-- Problem is fixxed, somewhere in the code I had a line that added queryparams to my URL. Deleted this and it worked. :) Everything works now.

If you have a fix, you can post it as an answer so others can follow/learn. — Charlie Joynt

Gregoire Mulliez Gregoire Mulliez · Accepted Answer · 2017-03-28T17:21:30

Thanks for your answer, I have the same issue using node.js / express While the change correct the problem, every time I 'ng build' my component the generated index.html get back to initial / configuration. Did you figure out how (nor where) I can change this settings ? Cheers greg serving @angular/cli component using express, path issue - as workaround I found : ng build --base-href /trinity-app/dist

Failed to load resource (JS files) with Angular2 / Tomcat

1 Answers