0

The what: I want to create a bundled version of my Angular 2 application

The how: Using Gulp and maven. Gulp for html, js and css files, and Maven for a war file. I have followed this tutorial to setup a gulp friendly structure using yo: https://www.npmjs.com/package/generator-angular2-typescript

I am following this solution here: https://stackoverflow.com/a/39561478/5655414 . I can successfully bundle my application and create a war from my entire project. When I run gulp build, my index.html goes from this:

<menu>Loading buttons....</menu>
<app>Loading interface..</app>

<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err) { console.error(err); });
</script>

to this:

<menu>Loading buttons....</menu>
<app>Loading interface..</app>

<!-- inject:js -->
<script src="vendors.min.js"></script>
<script src="app.min.js"></script>
<!-- endinject -->

When I create the war file, which contains:

app.min.js && -||-.map
config.json (my config file that bootstraps the application)
index.html (the the updated script sources)
styles.min.css
vendors.min.js && -||-.map

and deploy it to jboss, the following GET requests fail:

GET http://localhost:8080/styles.min.css 
GET http://localhost:8080/vendors.min.js 
GET http://localhost:8080/app.min.js

this makes no sense to me, as the needed js files are clearly within the war file.

Are there additional things that my index.html needs in order to process these bundles correctly?

Community
  • 1
  • 1
angryip
  • 2,140
  • 5
  • 33
  • 67

1 Answers1

0

Ah, the answer to this problem was rather simple.

One thing to keep in mind is the war file name you generate, and the baseUrl for your application. Hence, you want to match them up.

The issue :: In my index.html I had the following declaration

<base href="/">

However, my war file was called : my-ui.war Hence, the 404 complaints were correct:

GET http://localhost:8080/styles.min.css 
GET http://localhost:8080/vendors.min.js 
GET http://localhost:8080/app.min.js

They should instead be:

GET http://localhost:8080/my-ui/styles.min.css 
GET http://localhost:8080/my-ui/vendors.min.js 
GET http://localhost:8080/my-ui/app.min.js

Hence, I changed the base href to:

<base href="/my-ui/">

And everything worked flawlessly.

angryip
  • 2,140
  • 5
  • 33
  • 67