在 Wildfly 中部署 Angular 应用程序及其使用的 REST api？答案

【问题标题】：Deploy Angular app in Wildfly together with the REST api it is using?在 Wildfly 中部署 Angular 应用程序及其使用的 REST api？
【发布时间】：2016-03-27 12:42:45
【问题描述】：

我制作了一个 AngularJs 应用程序，它只使用我的 REST api 后端（用 Java 构建并部署在 Wildfly 上）。

我使用我的公共 IP 地址（通过端口转发）从 Internet 访问我的服务器。

我的问题是如何使用我的公共 IP 从 Internet 访问 Angular 应用程序。我也可以在 Wildfly 上部署它吗？我该怎么做？

【问题讨论】：

你在项目中使用 gulp/grunt 吗？
没有。我必须这样做还是让它更容易？

标签： java angularjs jakarta-ee wildfly

【解决方案1】：

您可以将 Angular 应用程序打包在与 REST 后端 API 相同的应用程序中。

例如，如果您将 REST api 打包在 .war 包中，您可以将 Angular 应用程序文件（html 页面、js 脚本等）放在 WAR 包根目录中，并将 REST 资源放在 WEB-INF 中/lib 目录打包为 JAR 文件。

查看 WAR 打包详情here。

然后要查询您的 REST api，您只需提供资源 URI，而不是基本 URL（包括 webapp 上下文），因为 angular 应用属于 webapp，它也会公开您的 REST api。

例如，如果您想获取您的资源之一，您可以使用 Angular 执行以下操作：（使用您的 REST API 在应用程序配置中使用“rs”路径并使用 $http 角度服务）

$http.get('rs/icecreams?flavoor=strawberry')

【讨论】：

【解决方案2】：

我有一个带有路由的 angular2 应用程序，并且需要额外的配置。这是过程：

在根模块中为您的路由启用使用哈希：
```
RouterModule.forRoot(routes, { useHash: true })
```
构建应用，简单的方法是ng buildangular-cli build中的其他选项
构建过程会在 Angular 应用程序根目录的“dist”文件夹中生成 Angular 应用程序。将 dist 文件夹中的所有文件复制到 WAR 文件的根目录。
访问 http://SERVER_IP:PORT/WAR_PATH/#/ 中的 Angular 应用程序。 Angular 应用的所有路由都从 #/ 开始。

【讨论】：

请注意，您可以在 web.xml 中将错误页面定义为 index.html，而不是在 url 中使用哈希，这样错误请求将被重定向到 index.html，其中 angular 可以接管control :) 因为对于某些 PO，url 中的 # 可能看起来很难看 :) <error-page> <location>/index.html</location> </error-page>

【解决方案3】：

如果您不想部署 WAR/EAR，请尝试在 Standalone.xml 配置文件中定义一个处理程序：

<server name="default-server">
    <http-listener name="default" socket-binding="http"/>
    <host name="default-host" alias="localhost">
        <location name="/" handler="welcome-content"/>
        <location name="/yourapp" handler="static"/>
    </host>
</server>
<handlers>
    <file name="welcome-content" path="${jboss.home.dir}/welcome-content" directory-listing="true"/>
    <file name="static" path="/var/yourapp" directory-listing="true"/>
</handlers>

【讨论】：