Apache Tomcat中的Angular2路由不适用于重定向答案

【问题标题】：Angular2 Routing in Apache Tomcat not working with redirectApache Tomcat中的Angular2路由不适用于重定向
【发布时间】：2017-04-12 01:01:33
【问题描述】：

我正在使用 Angular2 和 Apache Tomcat 8。当使用根 url 打开我的网站时，它可以工作并且单击按钮会重定向到特定的 url。但是当手动打开一个特定的 url 或重新加载网页时，它会给我一个 404。

我找到了这个解决方案：Angular 2.0 router not working on reloading the browser，但没有解释如何用 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。

【问题讨论】：

标签： apache tomcat angular angular-routing

【解决方案1】：

刚刚在一个项目中解决了这个问题。这里需要做的就是创建一个非常简单的 servlet 并为该 servlet 提供您需要允许添加书签/刷新的映射。从这里你的 servlet 什么都不做，只是：

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

这应该会解决它。

【讨论】：

所以这个 Servlet 位于 Tomcat 的根文件夹中，并且在 get/post/... 方法中它调用了这个 requestDispatcher？

【解决方案2】：

我遇到了类似的问题。原因是 Angular 路由中使用的虚拟 URL 被 Tomcat 视为文件，因此当文件不存在时会出现 404。我解决了 URL rewriting.

【讨论】：

【解决方案3】：

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

对我来说，我的解决方案是 npm install 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方法，你可以在this answer here查看相关信息，

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

【讨论】：

这看起来很简单，但我没有 app.js 文件。我在哪里可以找到它？

【解决方案4】：

Tomcat 有a built-in solution for this。

这应该适用于任何具有 UI 路由的单页应用框架，例如 Angular、React、ExtJS 等。

简而言之：

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 应用中定义了“用户”、“家庭”和“联系人”的 UI 路由：

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

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

但是规则可以变得更花哨，例如将所有请求发送到 index.html 除了特定路径，例如对于必须转到其他地方的/api 呼叫。上面的链接文本涵盖了所有细节。

【讨论】：