Angular Java WAR 中的 RouterModule

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 然后按回车键，我会得到错误，页面无法加载。

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

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

Answer 1

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

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

Angular Java WAR 中的 RouterModule

Angular RouterModule in Java WAR

java

routing

war

angular-routing

angular