Question

什么：我想创建一个Angular 2应用程序的捆绑版本

如何：使用Gulp和maven。 gulp用于html，js和css文件，Maven用于war文件。我已经按照本教程使用yo：https://www.npmjs.com/package/generator-angular2-typescript

设置了gulp友好结构

我在这里关注此解决方案：https://stackoverflow.com/a/39561478/5655414。我可以成功捆绑我的应用程序并从我的整个项目中创建一场战争。当我运行gulp build时，我的index.html就是这样的：

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

到此：

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

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

当我创建war文件时，其中包含：

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

并将其部署到jboss，以下GET请求失败：

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

这对我来说毫无意义，因为所需的js文件显然在war文件中。

为了正确处理这些捆绑包，我的index.html还有其他功能吗？

Answer 1

啊，这个问题的答案很简单。

要记住的一件事是你生成的war文件名，以及你的应用程序的baseUrl。因此，你想要匹配它们。

问题 ::在我的index.html中，我有以下声明

<base href="/">

但是，我的战争档案被称为：my-ui.war 因此，404投诉是正确的：

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

他们应该是：

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

因此，我将基础href更改为：

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

一切都完美无瑕。

将Angular2捆绑生产：GULP

1 个答案: