Deploy Angular 2 App with Webpack to Tomcat - 404

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

If you are not using HashLocationStrategy so refresh will give you 404 for tomcat deployment. In such case you have to use web.xml for your solution and provide all your route to point to index.html. Here is the code snippets that you can apply for your path and then Angular routes will handle this.

<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/home</url-pattern>
</servlet-mapping>

As suggested earlier by other configure your index.html(by ) to load the app.

Answer 3

I had a similar situation. The front-end app was ready using angular-2 and webpack and I wanted to deploy it on tomcat server. I followed the following steps:

1. Run command “ng build --prod --bh /[URL you want to extend for production]” on your Angular 2 project folder.

2. It will create dist folder in your angular2 app & 'your-project-name' from step 1 will be used on the tomcat server URL.

3. Copy all the files of newly created dist folder & paste them in webapps folder of Java application.

4. Create war file.

5. Deploy that war on server.

Hope it helps!

Answer 4

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.

Answer 5

I had to use a slight variation of @alokstar's answer. I had to add a "-d" or "--deploy" flag as well. This could be due to change in version.

I am running angular-cli version: 1.0.0-beta.28.3

1. I ran the command: "ng build -prod -bh /my_app -d /my_app" in the angular2 project folder.
2. Copy the contents of "dist" folder in angular2 project folder to "my_app" folder in tomcat/webapp folder.
3. Start tomcat server (if not running).

Note: * The ng build documents production flag as "-prod" and not "--prod"

With my tomcat running on port 8080, I could access the app using: http://localhost:8080/my_app

Answer 6

• copy "dist" folder to "webapps" folder in tomcat and link localhost:8080/dist will work. ( you must change "publicPath: '/'" to "publicPath: '/dist/'" and run "npm run build )
• My base: href="/"