Java WAR中的Angular RouterModule

Question

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

• 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更改为即http://localhost:8080/barn ，但是如果我自己在浏览器中输入URL http://localhost:8080/barn ，然后按Enter，我会得到错误，表明无法加载页面。

如果我在像Nginx这样的Web服务器上运行一个利用Angular路由功能的Angular应用程序，即使URL请求另一个文件，我也必须告诉Web服务器指向index.html文件。 因此，使用Nginx可以通过以下配置完成 ： try_files $uri $uri/ =404; 。 所以我想问题在WAR文件中是相同的。

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

Answer 1

好吧，我自己发现了。 因此，万一有人尝试与我尝试相同的情况，以下是解决此问题的说明，而无需在Web服务器中进行调整。

在Java项目的web.xml添加404错误页面。 以下四行将达到目的：

<web-app ...>

    ...

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

</web-app>

Answer 2

您可以将散列用于路由。 这样，您就不会破坏它。 在您的app.module.ts中：

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