Java WAR 中的 Angular RouterModule答案

【问题标题】：Angular RouterModule in Java WARJava WAR 中的 Angular RouterModule
【发布时间】：2018-11-11 20:09:14
【问题描述】：

我在 Angular 6.0.5 应用程序中使用 Angular 的路由功能。因此，我的应用中有如下路径：

http://localhost:8080/area
http://localhost:8080/barn
http://localhost:8080/tower

使用ng serve 运行我的应用程序效果很好。我可以直接在浏览器中输入http://localhost:8080/barn 之类的地址，它会加载应用程序并转到应用程序内的适当位置。

在构建应用程序后，我将 /dist/ 的全部内容复制到 Java WebApplication 中，编译后会导致 WAR。

为了构建它，我使用ng build --prod --build-optimizer --base-href=/myappdir/

当我在 Wildfly 等应用程序服务器中运行 WAR 时，我可以成功访问 URL http://localhost:8080/myappdir/ 并加载应用程序。单击应用程序中的某些路由按钮也成功地将 URL 更改为 ie http://localhost:8080/barn，但是如果我自己在浏览器中键入 URL http://localhost:8080/barn 然后回车，我会收到一个错误，即无法加载页面。

如果我在像 Nginx 这样的网络服务器上运行一个使用 Angular 路由功能的 Angular 应用程序，我必须告诉网络服务器指向 index.html 文件，即使 URL 请求不同的文件也是如此。因此，对于 Nginx，这将是 done with configuration，如下所示：try_files $uri $uri/ =404;。所以我猜这个问题在 WAR 文件中是一样的。

我必须在 WAR 文件中进行哪些配置才能使其指向 index.html 文件？

【问题讨论】：

angular.io/guide/…
stackoverflow.com/a/39337121/5695162
stackoverflow.com/a/40769350/5695162
@Vikas 感谢您提供三个链接。第一个我已经知道了，但是我必须直接对服务器进行设置，我想避免这种情况。
@Vikas 我也很想使用@Controller，但我不使用 Spring。我刚刚创建了一个简单的 Java Web App。

标签： java angular routing war angular-routing

【解决方案1】：

您可以对路由使用哈希。这样，你就不会破坏它。在你的 app.module.ts 中：

RouterModule.forRoot( yourAppRoutes, { useHash: true });

【讨论】：

【解决方案2】：

好的，我自己发现了。所以，如果有人和我一样尝试，这里是解决这个问题的描述，而不需要在网络服务器中进行调整。

将 404 错误页面添加到 Java 项目内的 web.xml。以下四行就可以解决问题：

<web-app ...>

    ...

    <error-page>
        <error-code>404</error-code>
        <location>/index.html</location>
    </error-page>

</web-app>

【讨论】：