Question

我在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更改为http://localhost:8080/barn，但如果我自己在浏览器中键入URL http://localhost:8080/barn然后按Enter键，则会出现错误，页面无法访问加载。

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

我必须在WAR文件中配置什么才能使其指向index.html文件？

Answer 1

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

将404错误页面添加到Java项目内的web.xml。以下四行将起到作用：

<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 });

Java WAR中的Angular RouterModule

2 个答案: