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

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.