Deploy Angular 2 App with Webpack to Tomcat - 404 Errors

Question

I want to build and deploy my Angular 2 front end to a Tomcat application server. For getting started I've followed exactly the steps of the following introduction: https://angular.io/docs/ts/latest/guide/webpack.html.

So I have the following project structure (all files are exactly as in the introduction mentionend above):

angular2-webpack
---config
-------helpers.js
-------karma.conf.js
-------karma-test-shim.js
-------webpack.common.js
-------webpack.dev.js
-------webpack.prod.js
-------webpack.test.js
---dist
---node_modules
---public
-------css
--------------styles.css
-------images
--------------angular.png
---src
-------app
--------------app.component.css
--------------app.component.html
--------------app.component.spec.ts
--------------app.component.ts
--------------app.module.ts
-------index.html
-------main.ts
-------polyfills.ts
-------vendor.ts
---typings
---karma.conf.js
---package.json
---tsconfig.json
---typings.json
---webpack.config.js

npm start respectively webpack-dev-server --inline --progress --port 3000 on the console or in Webstorm →works as expected

When I run npm build respectively rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail it builds the app without errors and the output bundle files get physically placed in the dist folder as expected.

dist
---assets
-------angular.png
---app.css
---app.css.map
---app.js
---app.js.map
---index.html
---polyfills.js
---polyfills.js.map
---vendor.js
---vendor.js.map

Next I copied the content of the dist folder to the webapps directory of a Tomcat 9.0. When I try to access the installed app I get an 404 error for the .css- and .js-files (which can be seen in the attached picture). It tries to get the files from the wrong URLs →"/obv/" is missing.

I'm really stuck here and I have the feeling that I've tried already everything I could find in the Internet regarding this topic.

Could someone please tell me what I'm doing wrong? Thank you in advance.

Answer 1

This is how i deployed my application on tomcat. It all depends on the base href you are providing in the index.html. All the images should be kept under 'assets' folder. And the path for any image in the project must be relative starting from this folder ie.

src="assets/img/img1.jpg"

As doing this, will remove the difficulty of file not found, which will arise in the deployment of the application.

Now, these steps will do the rest.

• ng build --prod --base-href   /myApp - this command will add the base-href='/myApp' to index.html
• Create folder myApp in the webapps folder of tomcat.
• Copy the contents of dist folder to this myApp folder.
• Run the server.

Application will be accessible at http://localhost:8080/my_app

If you dont want the context 'myApp' for your application, then try doing base href='./' Or just make the production build using the command ng build --prod

This helped in my case. Hope, it helps.

Answer 2

The problem is related to the tag <base href="/" />. This is just wrong when using a webserver like tomcat or trying to load the app directly from filesystem with firefox index.html. This must be changed to <base href="./" />. When the app still has problems check how the script files are imported. I tried to use angular2-webpack with tomcat and also needed to change all script tags to not use a leading slash in there src attribute.

<script src="js/vendor.js" ></script>

With webpack the behavior is controlled by the attribute output.publicPath. In the angular2 documentation and in the angular2-webpack this is set to

output.publicPath="/"

Which leads to absolute path in the links. When removed webpack will use relative paths and the links for scripts and images work.