Apache Tomcat中的Angular2路由与重定向不合作

Question

我正在使用angular2和apache tomcat 8.使用root URL打开我的网站时，它可以正常工作，然后单击按钮重定向到特定的URL。但是，当手动打开特定的URL或重新加载网页时，它给了我404。

我找到了此解决方案：Angular 2.0路由器不用重新加载浏览器，但是没有解释如何用tomcat解决它。

我在tomcat8的web.xml中尝试了一下：

  <servlet>
    <servlet-name>html-mapping</servlet-name>
    <jsp-file>/index.html</jsp-file>
  </servlet>
  <servlet-mapping>
    <servlet-name>html-mapping</servlet-name>
    <url-pattern>/*</url-pattern>
  </servlet-mapping>

然后我没有404（它加载了所有文件，例如main.bundle.js），但是只显示了angular2"加载..."文本，并且不会继续打开WebApp。

<</p>

Answer 1

刚刚在项目上解决了此问题。这里所需的所有内容都是创建一个非常简单的servlet，并为您提供所需的映射，以允许书签/刷新。从这里，您的servlet无能为力：

request.getRequestDispatcher("/index.html").forward(request, response);

应该照顾的。

Answer 2

我也有类似的问题。原因是Tomcat将用于角路由中使用的虚拟URL视为文件，因此当文件不存在时404。我解决了URL重写。

Answer 3

我遇到了这个问题，我尝试了许多选择来解决它，而无需真正获得我想要的干净解决方案。我想在没有模板引擎的情况下使用index.html文件。但是当我这样做时，我一直在刷新时得到404。原因是因为该应用程序无法正确跟踪您的路径。好吧，它做得正确，但不是您想要的方式。

对我来说，我的解决方案是NPM安装HBS。使用车把作为模板引擎大声创建一个index.hbs页面，然后将应用程序移交给angular2。我只在一页上使用它，无论出于何种原因，我都可以在不获得404的情况下刷新我想要的功能。

如果要走该路由，只需将其添加到app.js并创建一个新的index.hbs文件。然后将其添加到模板引擎中，

// view engine setup
app.set('views', path.join(__dirname, 'public'));
app.set('view engine', 'hbs');

另一个途径是使用Hashbang方法，您可以在此处看到有关此信息的信息，

我不喜欢这种路线，因为它在URL中添加了主题标签，这会导致其他令人讨厌的问题。我找到了只使用车把的最干净的方法。基本上，您只需要将当前的index.html文件更改为.hbs，然后将其添加到app.js文件中。只需确保正确的路径正确，以便知道在哪里可以找到它。

Answer 4

tomcat对此具有内置解决方案。

这应该适用于具有诸如Angular，React，Extjs等的UI路由的任何单页应用框架

---

简而言之：

1）添加一个rewriteValve webapps/{your-web-app-directory}/META-INF/context.xml

<?xml version="1.0" encoding="UTF-8"?>
<Context>  
  <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />
  ... your other context items
</Context>

2）添加/webapps/{your-web-app-directory}/WEB-INF/rewrite.config上所有路由的重写规则

例如，如果您的Angular App中定义了"用户"的UI路由：

RewriteRule ^/user(.*)$    /index.html [L]
RewriteRule ^/home(.*)$    /index.html [L]
RewriteRule ^/contact(.*)$ /index.html [L]

这些简单的规则告诉Tomcat将这三个名为"路径"的所有请求直接发送到index.html。

但是规则可以变得更加典型，例如将所有请求发送到index.html 某个路径，例如对于必须去其他地方的/api呼叫。上面的链接文本涵盖了所有详细信息。