Angular RouterModule 在 Java WAR 中

9 浏览
0 Comments

Angular RouterModule 在 Java WAR 中

我在我的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 Web应用程序中，然后编译生成WAR文件。

构建应用程序时，我使用命令ng build --prod --build-optimizer --base-href=/myappdir/

在像Wildfly这样的应用服务器上运行WAR文件时，我可以成功访问URLhttp://localhost:8080/myappdir/并加载应用程序。在应用程序中点击某个路由按钮也可以成功更改URL，例如http://localhost:8080/barn，但是如果我自己在浏览器中输入URLhttp://localhost:8080/barn然后按下回车键，我会收到一个无法加载页面的错误。

如果我在像Nginx这样的Web服务器上运行使用Angular的路由功能的Angular应用程序，我必须告诉Web服务器指向index.html文件，即使URL请求的是不同的文件。所以在Nginx中，这可以通过类似于这样的配置来实现：try_files $uri $uri/ =404;。所以我想WAR文件中的问题应该是一样的。

那么我在WAR文件中需要进行什么配置才能使其指向index.html文件呢？

0

2 答案

0 Comments

问题出现的原因是在使用Angular RouterModule时，在Java WAR项目中出现了路由问题。解决方法是使用hashes来处理路由，以避免出现问题。

在app.module.ts文件中，可以通过设置useHash为true来使用hashes处理路由：

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

这样设置之后，路由将会使用hashes来处理，从而避免出现问题。

0
0 Comments

Angular RouterModule在Java WAR中的问题出现的原因是在使用Angular RouterModule时，如果直接在浏览器中访问某个子路由，而不是通过主路由导航到该子路由，会导致404错误。

解决这个问题的方法是在Java项目的web.xml文件中添加一个404错误页面。只需要添加以下四行代码即可解决问题：

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

这样做的作用是将所有404错误的请求重定向到index.html页面，这样Angular应用就可以处理这些错误并正确显示对应的子路由页面。

0