Bündelung Angular2 für Produktion: GULP

Question

Das was: Mit Gulp und Maven: ich eine gebündelte Version meiner Angular 2 Anwendung

Die wie erstellen möchten. Gulp für HTML, Js und CSS-Dateien und Maven für eine Kriegsdatei. Ich bin diesem Tutorial gefolgt, um eine schluckfreundliche Struktur mit yo: https://www.npmjs.com/package/generator-angular2-typescript

einzurichten Ich folge dieser Lösung hier: https://stackoverflow.com/a/39561478/5655414. Ich kann meine Anwendung erfolgreich bündeln und einen Krieg aus meinem gesamten Projekt erstellen. Wenn ich schluck Build laufen, geht meine index.html daraus:

<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> 

dazu:

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

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

Wenn erstelle ich den Krieg-Datei, die enthält:

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 

und bereitstellen es zu jboss, schlagen die folgenden GET-Anforderungen fehl:

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

das macht für mich keinen Sinn, da die benötigten js-Dateien eindeutig innerhalb der Kriegsdatei liegen.

Gibt es zusätzliche Dinge, die mein index.html benötigt, um diese Bundles korrekt zu verarbeiten?

Answer 1

Ah, die Antwort auf dieses Problem war ziemlich einfach.

Eine Sache zu beachten ist der Name der Kriegsdatei, die Sie generieren, und die BaseUrl für Ihre Anwendung. Daher möchten Sie sie zusammenbringen.

Das Problem :: In meiner index.html ich folgende Erklärung jedoch

<base href="/"> 

hatte, war mein Krieg Datei mit dem Namen: my-ui.war Daher sind die 404 Beschwerden richtig waren:

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

Sie sollten stattdessen sein:

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 

Daher änderte ich die Basis href zu:

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

Und alles funktionierte einwandfrei.